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 定位 + 数据预排序 + 样式隔离，完全可构建出专业、可控、视觉对齐的分栏树图。该方案已在生产环境验证，兼顾灵活性与渲染稳定性，是当前最实用的落地解法。
