矩形树图

用面积说话的占比图:品类销售、预算分配、磁盘占用。分类多时比饼图更清爽。

在线矩形树图工具介绍

矩形树图(Treemap)在线生成工具,用矩形面积表示数值大小,同一层级的所有分类在一块区域内拼合展示,分类数量多时比饼图更清爽、比条形图更省空间,还能通过面包屑下钻查看层级。适合品类销售构成、预算分配、存储占用等场景。粘贴「名称 + 数值」两列即可生成,本地处理,数据不上传。

主要功能

  • 矩形面积精确对应数值大小,占比一目了然
  • 支持展示名称与数值标签,悬停查看明细
  • 带面包屑导航,为后续多层级下钻预留能力
  • 分类数量多时依然清爽,克服饼图碎片化
  • 本地渲染,导出 PNG / SVG

使用方法

  1. 整理两列数据:分类名称 + 数值
  2. 粘贴到数据框或上传文件
  3. 选择名称列与数值列
  4. 生成矩形树图
  5. 导出 PNG / SVG 用于汇报

常见问题

和饼图怎么选?
分类少于 6 个时饼图更直观;分类多于 8 个、或大小差异悬殊时,矩形树图的面积对比更易读,也不会出现细窄扇区。
支持多层级下钻吗?
当前按一层分类绘制,树图组件自带面包屑。多层级数据(如品类→子类)可通过「父级-子级」行列展开支持,可复制配置自行扩展。
面积是按什么算的?
按数值占合计的比例切分,采用 squarified 算法让矩形尽量接近正方形,方便目测比较。

注意事项

  • 数值为 0 或负数的分类会被忽略
  • 名称过长会自动截断,导出 SVG 保留完整文本
  • 分类很多(>30)时小矩形难以点击,建议先合并长尾
  • 配色按站点色板循环,同类业务建议手工统一色系