今天，我的365天独立开发挑战来到了第 85 天。作为可视化工具系列的最新成员，我正式向大家介绍今天刚刚发布的新作品：矩形树图生成器绘制工具。

矩形树图生成器绘制工具

在介绍工具之前，我们先来聊聊，到底什么是“矩形树图”，以及它为什么在数据分析界拥有不可替代的地位。

📊 科普时间：什么是矩形树图（Treemap）？

在日常生活中，当我们想展示“占比”时，第一反应往往是饼图。但是，如果你的数据不仅有占比，还存在复杂的层级结构（比如：大类目下有子类目，子类目下还有具体产品），并且分类多达几十上百个，这时候饼图就会碎成一地渣渣，根本没法看。

矩形树图（Treemap） 就是为了解决这个痛点而生的。

它的核心原理非常直观：

用“面积”代表“数值”：一个矩形越大，说明它代表的数据权重、金额或数量越高。

用“嵌套”代表“层级”：大矩形里面套着小矩形，完美展现“总-分”关系。

用“颜色”代表“分类”：通过不同的色块，一眼就能区分出不同的业务线或类别。

简单来说，它就像是在有限的屏幕画布上，用最高效的方式把数据“切砖块”，既能看清全局的结构，又不会遗漏局部的细节。

💡 应用场景：矩形树图都在哪里发光发热？

矩形树图并不是一个为了炫技而存在的复杂图表，它在很多专业领域其实是“刚需”：

金融与股市（最经典场景）： 关注股票的朋友一定见过股市的“热力图”。整个市场的板块（如科技、医药、消费）是大矩形，里面的个股是小矩形。面积代表市值大小，红色/绿色代表涨跌幅。一眼扫过去，今天大盘是红是绿、哪个板块在领涨，清清楚楚。

电商与销售数据分析： 如果你要分析全年的销售额，大矩形可以是“数码产品”、“服饰”、“家居”，子矩形则是具体的“手机”、“电脑”、“女装”。老板看一眼就能知道，到底哪个品类占据了营收的半壁江山。

电脑磁盘空间分析： 经典的电脑清理软件（如 SpaceSniffer）就是用矩形树图来向你展示，到底是哪个深层文件夹里的碎文件吃光了你的 C 盘。

城市用地比例：分析不同类型的城市用地比例大小，看不同用地之间的对比。

🛠️ 今天的作品：矩形树图生成器

很多非技术的同学想画一张好看的矩形树图，往往会被 ECharts 或 D3.js 这些代码库劝退，或者只能依赖臃肿的商业软件。

这也是我开发这个矩形树图生成器的初衷。我希望把它变成一个“开箱即用”的轻量化工具：

极简操作：不需要懂任何代码，直接粘贴你的层级数据就能一键生成。

高度自定义：支持调整配色方案、间距、边框和标签，让图表符合你的汇报 PPT 或文章风格。

所见即所得：在浏览器里即时预览，满意后直接导出高清图片。

至此，我的图表可视化工具矩阵又拼上了一块重要的拼图。如果你平时工作中需要处理大量带层级的数据，强烈建议你抛弃拥挤的饼图，来试试用矩形树图降维打击。