项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

矩形树图 treemap ​

层级构成的面积表达:矩形面积即数值,有子节点的矩形继续下钻拆分。一层看总量、多层看构成,组织成本拆解、预算结构、流量来源分解的常用图。

何时使用 ​

  • 数据是树形层级(父节点 → 子节点),且想用面积直觉表达量级;
  • 空间利用率高,适合维度多的构成拆解;
  • 更强调"从根到叶的路径"时改用旭日图。

示例 ​

专属数据字段 treemapData:每项 { name, value?, children? },children 存在时自动递归拆分。

扁平大类目 ​

没有层级也能用:十几个类目的量级排布,矩形面积一望即知谁是大头——这是饼图做不到的(八片以上已难判读),也是它和旭日图分工的差异:量值对比 + 空间效率选树图,路径感 + 角度份额选旭日。

与旭日图怎么选 ​

同一份层级数据两种表达,分野在读者要什么:要「各部分占总盘多少 + 沿路径下钻」用旭日图(角度份额、路径感强);要「谁的盘子大 + 空间塞得下更多类目」用树图(面积即数值、天然排序)。层级只有一层时两者都不如条形图诚实。

配置要点 ​

  • 叶子节点给 value,父节点可省略(由子节点汇总)也可显式给定;
  • 层级过深(> 3 层)可读性下降,建议拆成两张图;
  • 悬浮读取节点名称与数值,点击语义见交互与联动。

相关 ​