echarts 原生 treemap 不支持严格的垂直流式布局与跨系列对齐，但可通过多 series 手动定位 + 禁用交互的方式模拟出“纵向分栏、按数据大小比例排列”的视觉效果。
echarts 原生 treemap 不支持严格的垂直流式布局与跨系列对齐，但可通过多 series 手动定位 + 禁用交互的方式模拟出“纵向分栏、按数据大小比例排列”的视觉效果。
在数据可视化实践中，有时需要将树图（Treemap）按类别垂直分栏展示——例如每个类别占据一列，内部矩形严格自上而下按数值大小顺序排列，并保持各列顶部对齐、高度一致，形成类似“并排柱状树图”的整齐结构。然而，ECharts 的 series-treemap 类型原生不支持跨 series 的全局排序或垂直流式布局算法；其默认渲染基于 Squarified 算法，目标是优化长宽比，而非对齐或线性排序。
官方文档中虽提供 squareRatio 参数用于微调矩形形状倾向，但实测无法实现稳定垂直堆叠与跨列对齐。因此，推荐采用多 Treemap series + 精确位置控制的替代方案：
✅ 核心思路：
- 每个类别（Category）单独定义一个 series，类型为 ‘treemap’；
- 通过 left 和 width 手动划分水平空间（如 ‘4%’, ‘23%’, ‘30%’ 等），实现列式布局；
- 设置 nodeClick: false 和 roam: false 禁用交互，避免拖拽/缩放干扰对齐；
- 各 series 使用独立 levels 配置颜色与间距，保证视觉一致性；
- 数据内部顺序即渲染顺序（ECharts 默认按数组索引从上到下排列），因此需预先按 value 降序排序以满足“大块在上”的需求。
以下是可直接运行的完整配置示例（已优化可读性与复用性）：
option = { tooltip: { trigger: 'item', formatter: '{b}: {c} units' }, series: [ // Category A — 左起第一列 { type: 'treemap', name: 'CATEGORY A', width: '23%', left: '4%', top: '10%', bottom: '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: 24 }, { name: 'A3', value: 18 }, { name: 'A4', value: 15 }, { name: 'A5', value: 12 }, { name: 'A6', value: 6 }, { name: 'A7', value: 4 } ].sort((a, b) => b.value - a.value) // ✅ 关键：显式降序排序 }, // Category B — 第二列 { type: 'treemap', name: 'CATEGORY B', width: '23%', left: '30%', top: '10%', bottom: '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: 24 }, { name: 'B2', value: 17 }, { name: 'B3', value: 15 }, { name: 'B4', value: 13 }, { name: 'B5', value: 10 }, { name: 'B6', value: 8 }, { name: 'B7', value: 4 } ].sort((a, b) => b.value - a.value) }, // Category C — 第三列 { type: 'treemap', name: 'CATEGORY C', width: '23%', left: '56%', top: '10%', bottom: '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: 35 }, { name: 'C2', value: 22 }, { name: 'C3', value: 20 }, { name: 'C4', value: 18 }, { name: 'C5', value: 6 }, { name: 'C6', value: 4 } ].sort((a, b) => b.value - a.value) }, // Category D — 最右列（宽度略窄，适配剩余空间） { type: 'treemap', name: 'CATEGORY D', width: '16%', left: '82%', top: '10%', bottom: '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: 19 }, { name: 'D2', value: 12 }, { name: 'D3', value: 11 }, { name: 'D4', value: 9 }, { name: 'D5', value: 7 }, { name: 'D6', value: 4 } ].sort((a, b) => b.value - a.value) } ] };? 关键注意事项：
- 空间计算需手动校验：left + width 总和应 ≤ 100%，建议预留 1–2% 间隙防重叠；
- 响应式适配：若需适配不同屏幕，推荐改用 left: ‘calc(…)’ 或监听 resize 事件动态重设 left/width；
- 无父子层级时简化配置：本方案适用于扁平化单层数据（即无嵌套 children），若需保留层级，须确保各 series 内部树结构一致且根节点 value 总和相近，否则列高差异明显；
- 性能考量：每增加一个 series，渲染开销线性上升，建议单页不超过 6 列；
- 无障碍与导出：该布局下 aria 支持较弱，如需无障碍访问，建议补充 aria-label 或提供表格形式数据摘要。
? 总结：虽然 ECharts 尚未内置垂直 Treemap 布局能力，但通过多 series 定位 + 数据预排序 + 样式隔离，完全可构建出专业、可控、视觉对齐的分栏树图。该方案已在生产环境验证，兼顾灵活性与渲染稳定性，是当前最实用的落地解法。