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 组件绘制连接线或标注，进一步强化“连接”语义。