echarts 原生 treemap 不支持严格的垂直流式布局与跨系列连接，但可通过多实例 treemap 手动定位+统一样式模拟实现类“垂直堆叠+水平对齐”的视觉效果。
echarts 原生 treemap 不支持严格的垂直流式布局与跨系列连接，但可通过多实例 treemap 手动定位+统一样式模拟实现类“垂直堆叠+水平对齐”的视觉效果。
在数据可视化中，当需要将多个分类（如不同业务模块、部门或时间周期）以垂直方向依次排列、横向对齐、尺寸按值比例缩放的方式呈现时，开发者常期望 Treemap 能像瀑布流或分栏布局一样可控排布。然而，ECharts 的 series-treemap 类型采用自适应矩形填充算法（基于 squarified 算法），其节点顺序与空间分配由 squareRatio、leafDepth 和数据结构共同决定，无法通过配置直接实现跨 series 的垂直流式连接布局。
官方文档中 squareRatio 参数虽可影响单个 Treemap 内部矩形的宽高倾向（例如设为较大值促使更“竖直”的子块），但它仅作用于单个系列内部，并不能协调多个 series 之间的相对位置或对齐关系。因此，若需达成类似下图所示的“垂直分列、左对齐、宽度按类别独立缩放”的效果（即每个 category 占一竖列，内部节点从上到下垂直堆叠，各列之间无缝/紧凑衔接），推荐采用以下多 Treemap 实例 + 精确坐标控制的工程化方案：
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
✅ 核心思路：拆分 + 定位 + 视觉统一
- 将原始层级数据按顶级分类（如 A/B/C/D）拆分为多个独立 treemap series；
- 使用 left 和 width 显式控制每个 Treemap 在画布中的水平位置与宽度；
- 设置 roam: false 和 nodeClick: false 禁用交互，避免干扰视觉连贯性；
- 统一 levels 配置（尤其 gapWidth、color）确保风格一致；
- 所有 Treemap 共享相同高度（默认填满容器），形成自然的垂直对齐。
? 示例代码（可直接运行）
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} KB'
},
series: [
// Category A — 左侧第一列
{
type: 'treemap',
name: 'CATEGORY A',
width: '23%',
left: '4%',
height: '100%', // 确保撑满容器高度
roam: false,
nodeClick: false,
label: { show: true, formatter: '{b}' },
itemStyle: { borderColor: '#fff', borderWidth: 1 },
levels: [{
color: ['#4A90E2'],
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 — 第二列
{
type: 'treemap',
name: 'CATEGORY B',
width: '23%',
left: '30%',
roam: false,
nodeClick: false,
label: { show: true, formatter: '{b}' },
itemStyle: { borderColor: '#fff', borderWidth: 1 },
levels: [{
color: ['#50C878'],
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%',
roam: false,
nodeClick: false,
label: { show: true, formatter: '{b}' },
itemStyle: { borderColor: '#fff', borderWidth: 1 },
levels: [{
color: ['#2E8B57'],
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 — 右侧较窄列
{
type: 'treemap',
name: 'CATEGORY D',
width: '16%',
left: '82%',
roam: false,
nodeClick: false,
label: { show: true, formatter: '{b}' },
itemStyle: { borderColor: '#fff', borderWidth: 1 },
levels: [{
color: ['#FF8C00'],
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 }
]
}
]
};⚠️ 注意事项与优化建议
- 响应式适配：left 和 width 建议使用百分比（如 '30%'）而非像素值，配合容器 resize() 保证图表缩放时布局稳定；
- 间隙控制：所有 Treemap 的 gapWidth 应保持一致（如 4），避免列间出现不协调的空白；
- 颜色管理：为每个 category 指定明确色系（如蓝/绿/橙），增强可读性；若需渐变，可在 levels[0].color 中传入数组；
- 性能考量：每个 Treemap 实例均独立渲染，系列过多（>6）可能影响性能，建议结合 visibleMin 过滤微小节点；
- 替代方案提示：如需真正支持拖拽、缩放、联动下钻等高级交互，可考虑封装为自定义组件，或改用 grid + bar / custom 系列模拟 Treemap 视觉逻辑。
该方案虽非 ECharts 原生 Treemap 的“开箱即用”特性，但凭借配置的确定性与视觉的高度可控性，已成为企业级仪表盘中实现定制化层级布局的成熟实践路径。
