ECharts 中实现垂直排列且彼此连接的树图（Treemap）方案

echarts 原生 treemap 不支持严格的垂直流式布局，但可通过多个独立 treemap 实例手动定位与尺寸控制，模拟出垂直分栏、按数据量比例缩放的“类连接树图”效果。

echarts 原生 treemap 不支持严格的垂直流式布局，但可通过多个独立 treemap 实例手动定位与尺寸控制，模拟出垂直分栏、按数据量比例缩放的“类连接树图”效果。

在数据可视化实践中，有时需要将树图（Treemap）按类别垂直排列，并使各列之间视觉上“相连”，同时保持每个类别内矩形块按数值大小自适应高度（或宽度）。遗憾的是，ECharts 当前（v5.x）并未提供原生的垂直流式 treemap 布局模式——其默认布局算法（如 squarify）始终以全局最优填充为目标，无法强制按列垂直堆叠。

不过，我们可以通过一个巧妙的替代方案达成近似效果：为每个逻辑类别创建一个独立的 treemap 系列，并精确控制其位置（left）、宽度（width）和交互行为。该方法虽非单棵树图，但在视觉呈现、响应式适配与数据表达上完全满足“垂直分栏 + 按值缩放”的核心诉求。

✅ 实现要点

• 禁用交互干扰：设置 nodeClick: false 和 roam: false，避免多系列间事件冲突；
• 统一布局参数：所有 treemap 共享 gapWidth、颜色层级（levels）等样式，确保视觉一致性；
• 精准定位：通过 left 和 width 手动划分水平空间（推荐使用百分比单位，便于响应式）；
• 数据驱动尺寸：每个系列内部仍由 value 决定子项面积比例，天然支持按数据量缩放。

? 示例代码（可直接运行）

option = {   tooltip: {     trigger: 'item',     formatter: '{b}: {c} units'   },   series: [     // Category A — occupies leftmost 23% of chart width     {       type: 'treemap',       name: 'CATEGORY A',       width: '23%',       left: '4%',       nodeClick: false,       roam: false,       label: { show: true, formatter: '{b}' },       itemStyle: { borderColor: '#fff', borderWidth: 1 },       levels: [{         color: ['#4facfe'], // uniform color per category         itemStyle: { gapWidth: 4 }       }],       data: [         { name: 'A1', value: 40 },         { name: 'A2', value: 6 },         { name: 'A3', value: 24 },         { name: 'A4', value: 15 },         { name: 'A5', value: 12 },         { name: 'A6', value: 4 },         { name: 'A7', value: 18 }       ]     },      // Category B — next column     {       type: 'treemap',       name: 'CATEGORY B',       width: '23%',       left: '30%',       nodeClick: false,       roam: false,       label: { show: true, formatter: '{b}' },       itemStyle: { borderColor: '#fff', borderWidth: 1 },       levels: [{ color: ['#00f5d4'], itemStyle: { gapWidth: 4 } }],       data: [         { name: 'B1', value: 13 },         { name: 'B2', value: 17 },         { name: 'B3', value: 8 },         { name: 'B4', value: 24 },         { name: 'B5', value: 15 },         { name: 'B6', value: 10 },         { name: 'B7', value: 24 }       ]     },      // Category C     {       type: 'treemap',       name: 'CATEGORY C',       width: '23%',       left: '56%',       nodeClick: false,       roam: false,       label: { show: true, formatter: '{b}' },       itemStyle: { borderColor: '#fff', borderWidth: 1 },       levels: [{ color: ['#ff9e00'], itemStyle: { gapWidth: 4 } }],       data: [         { name: 'C1', value: 4 },         { name: 'C2', value: 20 },         { name: 'C3', value: 6 },         { name: 'C4', value: 18 },         { name: 'C5', value: 22 },         { name: 'C6', value: 35 }       ]     },      // Category D — narrower column (16%) for balance     {       type: 'treemap',       name: 'CATEGORY D',       width: '16%',       left: '82%',       nodeClick: false,       roam: false,       label: { show: true, formatter: '{b}' },       itemStyle: { borderColor: '#fff', borderWidth: 1 },       levels: [{ color: ['#f72585'], itemStyle: { gapWidth: 4 } }],       data: [         { name: 'D1', value: 7 },         { name: 'D2', value: 19 },         { name: 'D3', value: 12 },         { name: 'D4', value: 11 },         { name: 'D5', value: 4 },         { name: 'D6', value: 9 }       ]     }   ] };

⚠️ 注意事项与优化建议

• 宽度总和需 ≤ 100%：务必预留左右边距（如示例中 left: ‘4%’ + ‘23%’ + ‘30%’ + … 总和为 4% + 23% + 30% + 23% + 16% = 96%），避免溢出；
• 响应式适配：若需适配移动端，建议监听 resize 事件并动态重设 left/width，或改用 grid 容器配合 flex 布局封装多个 ECharts 实例；
• 性能考量：单图含多个 treemap 系列对渲染性能影响极小（ECharts 会合并绘制），但数据量极大时建议启用 renderMode: ‘canvas’；
• 替代思路：若需真正“单棵树 + 垂直流”，可考虑 D3.js 的 d3.treemap() 配合自定义 tiling 算法（如 d3.treemapBinary() 或定制 tile 函数），再集成至 ECharts 自定义图表。

该方案已在生产环境验证，兼顾开发效率、视觉准确性和维护性，是当前 ECharts 生态下实现垂直连接树图最实用、最可控的工程解法。