Preview Updated 2026-05-10

Treemap

Hierarchical rectangle area chart, single-level slice-and-dice layout.

Basic usage

Data comes in via props; rendered as pure SVG with no third-party charting dependency. Colors come from the --viz-1..8 tokens, colorblind-friendly.

背景

<script setup lang="ts">
import { CfTreemap } from '@chufix-design/vue';
const nodes = [
  { name: 'react-dom', value: 1200 },
  { name: 'react', value: 720 },
  { name: 'lodash', value: 540 },
  { name: 'moment', value: 480 },
  { name: 'rxjs', value: 380 },
  { name: 'd3', value: 320 },
  { name: 'three', value: 280 },
  { name: 'others', value: 200 },
];
</script>

<template>
  <CfTreemap :nodes="nodes" />
</template>

<CfTreemap ... />

Label visibility

showLabels=false shows only color blocks — useful for thumbnail layouts. Text only appears when a rectangle is large enough (w>50, h>20).

背景

5 个节点（label 显示）

label 隐藏

<script setup lang="ts">
import { CfTreemap } from '@chufix-design/vue';
const small = [
  { name: '依赖 A', value: 280 },
  { name: '依赖 B', value: 220 },
  { name: '依赖 C', value: 180 },
  { name: '依赖 D', value: 120 },
  { name: '其他', value: 80 },
];
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">5 个节点（label 显示）</div>
      <CfTreemap :nodes="small" :height="180" />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">label 隐藏</div>
      <CfTreemap :nodes="small" :height="180" :show-labels="false" />
    </div>
  </div>
</template>

<CfTreemap nodes={nodes} />
<CfTreemap nodes={nodes} showLabels={false} />

API

Prop	Type	Default	Description
`nodes`	`TreemapNode[]`	`—`	{ name, value, colorIndex? }[]
`width / height`	`number`	`480 / 240`