Création de dendrogrammes connectés verticalement : guide de mise en œuvre d'Echart

Question

Le code ci-dessous est un exemple d'utilisation du treemap d'Echart, je souhaite que chaque série soit disposée dans l'ordre vertical, puis connectée à chaque série, puis redimensionnée en fonction des données.

Dans cet exemple, chaque série sera classée aléatoirement selon sa taille.

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

C'est le résultat que j'attendais. Entrez la description de l'image ici

Answer 1

Pour autant que je sache, cela ne semble pas possible pour le moment. Vous pouvez affecter la forme de la zone via l'attribut squareRatio, mais je ne peux pas l'aligner verticalement.

Si vous n'avez pas besoin de panoramique et de zoom, vous pouvez placer un treemap pour chaque catégorie et ajuster la position en conséquence (par exemple : gauche : '20%') et Taille left: '20%'）和大小（例如：width: '25%' (par exemple : largeur : '25%').

Voici un exemple :

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