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.

src/App.vue vue

<CfTreemap ... />

src/App.tsx tsx

<CfTreemap ... />

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 隐藏

src/App.vue vue

<CfTreemap :nodes="nodes" />
<CfTreemap :nodes="nodes" :show-labels="false" />

src/App.tsx tsx

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

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