Mencipta Dendrogram Bersambung Menegak: Panduan Pelaksanaan Echart

Question

Kod di bawah ialah contoh penggunaan peta pokok Echart, saya mahu setiap siri disusun dalam susunan menegak, dan kemudian disambungkan kepada setiap siri, dan kemudian diubah saiz mengikut data.

Dalam contoh ini, setiap siri akan dipesan secara rawak mengikut saiznya.

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

Inilah hasil yang saya jangkakan. Masukkan penerangan imej di sini

Answer 1

Setahu saya, ia nampaknya tidak mungkin buat masa ini. Anda boleh mempengaruhi bentuk kawasan melalui atribut squareRatio, tetapi saya tidak boleh menyelaraskannya secara menegak.

Jika anda tidak memerlukan sorot dan zum, anda boleh meletakkan peta pokok untuk setiap kategori dan melaraskan kedudukan sewajarnya (cth: kiri: '20%') dan Saiz left: '20%'）和大小（例如：width: '25%' (contohnya: lebar: '25%').

Ini ialah contoh:

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