垂直树图布局解析与应用技巧

本文深入解析了在 ECharts 中实现垂直树图布局的实用方案——针对原生 treemap 不支持跨系列垂直流式排列的局限，提出通过拆分数据为多个 Treemap 实例、精确控制每个实例的 left/width/height 位置与尺寸、统一视觉样式（颜色、间隙、标签）并禁用干扰交互的方式，成功模拟出“多列垂直堆叠、横向对齐、按值缩放”的专业级层级可视化效果；该方法兼顾灵活性与稳定性，已广泛应用于企业仪表盘等对布局精度要求严苛的场景。

ECharts 原生 Treemap 不支持严格的垂直流式布局与跨系列连接，但可通过多实例 Treemap 手动定位+统一样式模拟实现类“垂直堆叠+水平对齐”的视觉效果。

ECharts 原生 Treemap 不支持严格的垂直流式布局与跨系列连接，但可通过多实例 Treemap 手动定位+统一样式模拟实现类“垂直堆叠+水平对齐”的视觉效果。

在数据可视化中，当需要将多个分类（如不同业务模块、部门或时间周期）以垂直方向依次排列、横向对齐、尺寸按值比例缩放的方式呈现时，开发者常期望 Treemap 能像瀑布流或分栏布局一样可控排布。然而，ECharts 的 series-treemap 类型采用自适应矩形填充算法（基于 squarified 算法），其节点顺序与空间分配由 squareRatio、leafDepth 和数据结构共同决定，无法通过配置直接实现跨 series 的垂直流式连接布局。

官方文档中 squareRatio 参数虽可影响单个 Treemap 内部矩形的宽高倾向（例如设为较大值促使更“竖直”的子块），但它仅作用于单个系列内部，并不能协调多个 series 之间的相对位置或对齐关系。因此，若需达成类似下图所示的“垂直分列、左对齐、宽度按类别独立缩放”的效果（即每个 category 占一竖列，内部节点从上到下垂直堆叠，各列之间无缝/紧凑衔接），推荐采用以下多 Treemap 实例 + 精确坐标控制的工程化方案：

✅ 核心思路：拆分 + 定位 + 视觉统一

• 将原始层级数据按顶级分类（如 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 的“开箱即用”特性，但凭借配置的确定性与视觉的高度可控性，已成为企业级仪表盘中实现定制化层级布局的成熟实践路径。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~