echarts 原生 treemap 不支持严格的垂直流式布局，但可通过多个独立 treemap 实例手动定位与尺寸控制，模拟出垂直分栏、按数据量比例缩放的“类连接树图”效果。
echarts 原生 treemap 不支持严格的垂直流式布局，但可通过多个独立 treemap 实例手动定位与尺寸控制，模拟出垂直分栏、按数据量比例缩放的“类连接树图”效果。
在数据可视化实践中，有时需要将树图（Treemap）按类别垂直排列，并使各列之间视觉上“相连”，同时保持每个类别内矩形块按数值大小自适应高度（或宽度）。遗憾的是，ECharts 当前（v5.x）并未提供原生的垂直流式 treemap 布局模式——其默认布局算法（如 squarify）始终以全局最优填充为目标，无法强制按列垂直堆叠。
不过，我们可以通过一个巧妙的替代方案达成近似效果：为每个逻辑类别创建一个独立的 treemap 系列，并精确控制其位置（left）、宽度（width）和交互行为。该方法虽非单棵树图，但在视觉呈现、响应式适配与数据表达上完全满足“垂直分栏 + 按值缩放”的核心诉求。
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
✅ 实现要点
- 禁用交互干扰：设置 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 生态下实现垂直连接树图最实用、最可控的工程解法。
