Creating Vertically Connected Dendrograms: Echart Implementation Guide

Question

The code below is an example of using Echart's treemap. I want each series to be arranged in vertical order, then connected to each series, and then resized according to the data.

In this example, each series will be randomly ordered by its size.

https://echarts.apache.org/examples/an/editor.html?c=treemap-disk

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: '磁盘使用情况',
        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>',
            '磁盘使用情况: ' + formatUtil.addCommas(value) + ' KB'
          ].join('');
        }
      },
      series: [
        {
          name: '磁盘使用情况',
          type: 'treemap',
          visibleMin: 300,
          label: {
            show: true,
            formatter: '{b}'
          },
          itemStyle: {
            borderColor: '#fff'
          },
          levels: getLevelOption(),
          data: diskData
        }
      ]
    })
  );
});

This is the result I expect. Enter image description here

Answer 1

As far as I know, it seems impossible at the moment. You can affect the shape of the area via the squareRatio property, but I can't align it vertically.

If you don't need panning and zooming, you can place a treemap for each category and adjust the position accordingly (eg: left: '20%') and Size (for example: width: '25%').

Here is an example:

option = {
  series: [
    {
      type: 'treemap',
      name: 'CATEGORY A',
      width: '23%',
      left: '4%',
      nodeClick: false,
      roam: false,
      levels: [{color: ['lightblue'], 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}
      ]
    },
    {
      type: 'treemap',
      name: 'CATEGORY B',
      width: '23%',
      left: '30%',
      nodeClick: false,
      roam: false,
      levels: [{color: ['lightgreen'], 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}
      ]
    },
    {
      type: 'treemap',
      name: 'CATEGORY C',
      width: '23%',
      left: '56%',
      nodeClick: false,
      roam: false,
      levels: [{color: ['green'], 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},
      ]
    },
    {
      type: 'treemap',
      name: 'CATEGORY D',
      width: '16%',
      left: '82%',
      nodeClick: false,
      roam: false,
      levels: [{color: ['orange'], 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},
      ]
    }
  ]
};