建立垂直連接的樹狀圖：Echart實作指南

Question

下面的程式碼是使用Echart的treemap的範例，我希望每個系列按垂直順序排列，然後連接到每個系列，然後根據資料進行調整大小。

在這個範例中，每個系列將按其大小隨機排列。

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
        }
      ]
    })
  );
});

這是我期望的結果。 在此輸入圖像描述

Answer 1

據我所知，目前似乎不可能。您可以透過squareRatio屬性來影響區域的形狀，但我無法垂直對齊。

如果您不需要平移和縮放，您可以為每個類別放置一個樹圖，並相應地調整位置（例如：left: '20%'）和大小（例如：width: '25%'）。

這裡是一個範例：

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},
      ]
    }
  ]
};