echarts 原生 treemap 不支持严格的垂直布局与跨系列连接，但可通过多个独立 treemap 实例手动定位、等宽缩放与视觉对齐，模拟出垂直分栏、自上而下排列、横向并列的“类连接树图”效果。
echarts 原生 treemap 不支持严格的垂直布局与跨系列连接，但可通过多个独立 treemap 实例手动定位、等宽缩放与视觉对齐，模拟出垂直分栏、自上而下排列、横向并列的“类连接树图”效果。
在数据可视化实践中，有时需要将不同分类（如部门、产品线、时间周期）以垂直分栏形式并排展示，每栏内部按数值大小自上而下垂直堆叠（即“纵向 treemap”），且各栏之间视觉连贯、宽度协调、高度对齐——这种布局常被称作“垂直连接树图”（vertically connected treemap）。遗憾的是，ECharts 的 series-treemap 类型不提供原生的垂直排序方向控制或跨 series 的布局联动能力；其 squareRatio 参数仅影响单个 treemap 内部矩形的宽高倾向，无法强制整体垂直流式排列，也无法实现多系列间的坐标级对齐。
因此，实现该效果的核心思路是：放弃单 treemap 多层级嵌套，转为多个独立 treemap 实例，并通过精确的 left/width/height 控制位置与比例，配合统一的 levels 配置和视觉设计，达成视觉上的垂直分栏与逻辑连接感。
✅ 推荐实现方案：多 Treemap 并排 + 手动定位
以下是一个生产就绪的配置示例，包含 4 个垂直栏目（CATEGORY A–D），每个栏目独立渲染、宽度可控、禁用交互干扰（nodeClick: false, roam: false），并使用一致的 gapWidth 和单色配色增强纵向节奏感：
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} KB'
},
series: [
// CATEGORY A — 左起第1栏（4% 开始，宽23%）
{
type: 'treemap',
name: 'CATEGORY A',
width: '23%',
left: '4%',
height: '80%', // 统一高度，便于纵向对齐
top: '10%',
nodeClick: false, // 禁用点击，避免干扰
roam: false, // 禁用缩放/拖拽
label: { show: true, formatter: '{b}' },
itemStyle: { borderColor: '#fff', borderWidth: 1 },
levels: [{
color: ['#4facfe'], // 单色系强化垂直一致性
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 — 第2栏（30% 开始，宽23%）
{
type: 'treemap',
name: 'CATEGORY B',
width: '23%',
left: '30%',
height: '80%',
top: '10%',
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 — 第3栏（56% 开始，宽23%）
{
type: 'treemap',
name: 'CATEGORY C',
width: '23%',
left: '56%',
height: '80%',
top: '10%',
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 — 第4栏（82% 开始，宽16%，留白适配）
{
type: 'treemap',
name: 'CATEGORY D',
width: '16%',
left: '82%',
height: '80%',
top: '10%',
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%：示例中 4% + 23% + 30% + 23% + 56% + 23% + 82% + 16% 是 left 与 width 的叠加逻辑，实际占用为 23% + 23% + 23% + 16% = 85%，剩余 15% 作为栏间/边缘留白，确保响应式安全；
- 高度与 top 对齐至关重要：所有 treemap 设置相同 height 和 top，才能保证各栏顶部基准线一致，形成真正的“垂直连接”视觉；
- 禁用交互提升体验：nodeClick: false 和 roam: false 可避免用户误操作导致视图错乱，尤其当多 treemap 紧邻时；
- 色彩与间距统一增强连贯性：各栏 gapWidth 保持一致（如 4），颜色选用同色系不同明度，强化纵向阅读流；
- 数据量差异大时建议归一化或限制最小值：若某栏数据极小（如全部
✅ 总结
虽然 ECharts 尚未内置垂直 treemap 布局引擎，但通过「多 series + 精确盒模型控制 + 视觉一致性设计」的组合策略，完全可复现专业级垂直连接树图。该方法稳定、兼容性好（支持所有 ECharts 5+ 版本）、易于维护，且能灵活适配动态数据源——只需将原始分类数据按组拆分，注入对应 series 即可。对于追求更高定制化的场景，亦可结合 graphic 组件绘制连接线或标注，进一步强化“连接”语义。
