如何通过ECharts创建垂直关联的树形图（treemap）

问题描述 #

我使用ECharts实现树形图（treemap）时，参考了磁盘使用示例，当前示例中各节点按尺寸随机排列。我需要实现各节点垂直排列、层级关联，且依据数据大小自动调整尺寸的效果，预期为垂直分层的树形结构。现有代码如下：

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/disk.tree.json', function (diskData) {
  myChart.hideLoading();
  const formatUtil = echarts.format;
  function getLevelOption() {
    return [
      {
        itemStyle: {
          borderWidth: 0,
          gapWidth: 5
        }
      },
      {
        itemStyle: {
          gapWidth: 1
        }
      },
      {
        colorSaturation: [0.35, 0.5],
        itemStyle: {
          gapWidth: 1,
          borderColorSaturation: 0.6
        }
      }
    ];
  }
  myChart.setOption(
    (option = {
      title: {
        text: 'Disk Usage',
        left: 'center'
      },
      tooltip: {
        formatter: function (info) {
          var value = info.value;
          var treePathInfo = info.treePathInfo;
          var treePath = [];
          for (var i = 1; i < treePathInfo.length; i++) {
            treePath.push(treePathInfo[i].name);
          }
          return [
            '<div class="tooltip-title">' +
              formatUtil.encodeHTML(treePath.join('/')) +
              '</div>',
            'Disk Usage: ' + formatUtil.addCommas(value) + ' KB'
          ].join('');
        }
      },
      series: [
        {
          name: 'Disk Usage',
          type: 'treemap',
          visibleMin: 300,
          label: {
            show: true,
            formatter: '{b}'
          },
          itemStyle: {
            borderColor: '#fff'
          },
          levels: getLevelOption(),
          data: diskData
        }
      ]
    })
  );
});

修改方案 #

只需在treemap的series配置中添加3个关键属性，即可实现垂直排列+按数据尺寸分配空间的效果：

• layoutType: 'slice'：切换为切片式布局，实现层级垂直关联的结构
• orient: 'vertical'：指定切片的排列方向为垂直
• sort: 'desc'：按数据值从大到小排序（若需从小到大排序可设为'asc'）

修改后的series配置片段 #

series: [
  {
    name: 'Disk Usage',
    type: 'treemap',
    visibleMin: 300,
    label: {
      show: true,
      formatter: '{b}'
    },
    itemStyle: {
      borderColor: '#fff'
    },
    levels: getLevelOption(),
    data: diskData,
    // 新增配置
    layoutType: 'slice',
    orient: 'vertical',
    sort: 'desc'
  }
]

效果说明 #

slice布局模式会将父节点的空间按照子节点的数值比例进行垂直分割，每个子节点占据对应比例的垂直空间，完全匹配垂直排列、层级关联且按数据尺寸分配的需求。

内容的提问来源于stack exchange，提问作者user22362879