开发预览更新于 2026-05-10

Treemap 矩形树图

层级矩形面积图，slice-and-dice 单层布局。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景

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

showLabels=false 时只展示色块，适合微缩组合。仅当矩形足够大（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

属性	类型	默认值	说明
`nodes`	`TreemapNode[]`	`—`	{ name, value, colorIndex? }[]
`width / height`	`number`	`480 / 240`