矩形树图生成器介绍
矩形树图（Treemap）用嵌套矩形的面积表示数值大小：同级矩形互不重叠、面积即占比，层级由嵌套关系表达，能在有限空间内放下大量层级数据，是磁盘占用与预算构成可视化的经典选择。
分析电脑各目录磁盘占用、公司费用按科目拆解、代码库各模块行数分布——层级多、条目多时，矩形树图比饼图/旭日图容纳力更强，一眼锁定「占面积最大」的大头。
基于 Apache ECharts 渲染，支持点击下钻聚焦分支；数据为 JSON 树（name/value/children），叶子节点必须有 value，输入错误有语法提示，全部解析与绘制在本地完成。
使用步骤
- 1准备 JSON：整理 {"name":"根","children":[{"name":"子项","value":120}]} 树形数据。
- 2粘贴生成：矩形实时排布，面积即数值大小。
- 3下钻聚焦：点击分支矩形进入下级，观察内部构成。
- 4导出使用：导出高清 PNG 附在分析文档。
适用场景
- 磁盘分析各目录及子目录文件大小绘成树图，快速定位空间大户。
- 费用构成公司支出按科目 → 子科目的面积分布，一图看预算大头。
- 代码统计仓库各模块代码行数分布，评估重构优先级。
- 资产盘点投资组合按资产类别 → 标的的金额分布展示。
实用小贴士
- 叶子节点必须提供 value，缺失会导致该分支无法渲染。
- 标签过长时会自动截断，建议 name 控制在 6 字以内。
- 下钻前导出为全貌图，下钻后导出为局部图，可各取所需。
常见问题
矩形顺序有规律吗？
工具按面积从大到小排布，最大的矩形通常在左上角。
条目太多会重叠吗？
几百个节点仍可渲染，但过小的矩形看不清标签；建议同级条目控制在 15 个以内，尾部合并。
和旭日图选哪个？
强调占比与下钻用旭日图；强调面积对比、条目多、空间紧凑用树图。