如何通过 Echart 创建垂直连接的树状图？

huangapple
go评论90阅读模式
英文:

How to create vertically connected tree map via Echart

问题

以下是使用Echart绘制树图的示例代码。我期望的效果是将每个系列按垂直顺序连接起来，并根据数据进行大小调整。

在这个示例中，每个系列将按其大小随机排列。

https://echarts.apache.org/examples/en/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: '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
        }
      ]
    })
  );
});

这是我期望的效果。
enter image description here

英文:

This code below is the example of treemap using Echart, what i expect is to order each series vertically and then connected to each series, then sizing by the data.

In this example, each series will randomly arrange by its size

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

myChart.showLoading();
$.get(ROOT_PATH + &#39;/data/asset/data/disk.tree.json&#39;, 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: &#39;Disk Usage&#39;,
left: &#39;center&#39;
},
tooltip: {
formatter: function (info) {
var value = info.value;
var treePathInfo = info.treePathInfo;
var treePath = [];
for (var i = 1; i &lt; treePathInfo.length; i++) {
treePath.push(treePathInfo[i].name);
}
return [
&#39;&lt;div class=&quot;tooltip-title&quot;&gt;&#39; +
formatUtil.encodeHTML(treePath.join(&#39;/&#39;)) +
&#39;&lt;/div&gt;&#39;,
&#39;Disk Usage: &#39; + formatUtil.addCommas(value) + &#39; KB&#39;
].join(&#39;&#39;);
}
},
series: [
{
name: &#39;Disk Usage&#39;,
type: &#39;treemap&#39;,
visibleMin: 300,
label: {
show: true,
formatter: &#39;{b}&#39;
},
itemStyle: {
borderColor: &#39;#fff&#39;
},
levels: getLevelOption(),
data: diskData
}
]
})
);
});

This is what I expected.
enter image description here

答案1

得分: 0

据我所知，目前似乎不可能实现。您可以通过squareRatio属性来影响区域的形状，但我无法使其垂直对齐。

如果您不需要平移和缩放，您可以为每个类别放置一个矩形树图，并相应地调整position（例如left: '20%'）和size（例如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},
      ]
    }
  ]
};
英文:

As far as I can tell it is currently not possible. You can impact the shape of the regions via the squareRatio property but I couldnt get it aligned vertically.

If you dont need to pan and zoom you could put one treemap for each categorie and adjust the position (eg. left: &#39;20%&#39;) and size (eg. width: &#39;25%&#39;) accordingly.

Here is an example:

option = {
  series: [
    {
      type: &#39;treemap&#39;,
      name: &#39;CATEGORY A&#39;,
      width: &#39;23%&#39;,
      left: &#39;4%&#39;,
      nodeClick: false,
      roam: false,
      levels: [{color: [&#39;lightblue&#39;], itemStyle: {gapWidth: 4}}],
      data: [
        {name: &#39;A1&#39;, value: 40},
        {name: &#39;A2&#39;, value: 6},
        {name: &#39;A3&#39;, value: 24},
        {name: &#39;A4&#39;, value: 15},
        {name: &#39;A5&#39;, value: 12},
        {name: &#39;A6&#39;, value: 4},
        {name: &#39;A7&#39;, value: 18}
      ]
    },
    {
      type: &#39;treemap&#39;,
      name: &#39;CATEGORY B&#39;,
      width: &#39;23%&#39;,
      left: &#39;30%&#39;,
      nodeClick: false,
      roam: false,
      levels: [{color: [&#39;lightgreen&#39;], itemStyle: {gapWidth: 4}}],
      data: [
        {name: &#39;B1&#39;, value: 13},
        {name: &#39;B2&#39;, value: 17},
        {name: &#39;B3&#39;, value: 8},
        {name: &#39;B4&#39;, value: 24},
        {name: &#39;B5&#39;, value: 15},
        {name: &#39;B6&#39;, value: 10},
        {name: &#39;B7&#39;, value: 24}
      ]
    },
    {
      type: &#39;treemap&#39;,
      name: &#39;CATEGORY C&#39;,
      width: &#39;23%&#39;,
      left: &#39;56%&#39;,
      nodeClick: false,
      roam: false,
      levels: [{color: [&#39;green&#39;], itemStyle: {gapWidth: 4}}],
      data: [
        {name: &#39;C1&#39;, value: 4},
        {name: &#39;C2&#39;, value: 20},
        {name: &#39;C3&#39;, value: 6},
        {name: &#39;C4&#39;, value: 18},
        {name: &#39;C5&#39;, value: 22},
        {name: &#39;C6&#39;, value: 35},
      ]
    },
    {
      type: &#39;treemap&#39;,
      name: &#39;CATEGORY D&#39;,
      width: &#39;16%&#39;,
      left: &#39;82%&#39;,
      nodeClick: false,
      roam: false,
      levels: [{color: [&#39;orange&#39;], itemStyle: {gapWidth: 4}}],
      data: [
        {name: &#39;D1&#39;, value: 7},
        {name: &#39;D2&#39;, value: 19},
        {name: &#39;D3&#39;, value: 12},
        {name: &#39;D4&#39;, value: 11},
        {name: &#39;D5&#39;, value: 4},
        {name: &#39;D6&#39;, value: 9},
      ]
    }
  ]
};

huangapple
  • 本文由 发表于 2023年8月9日 17:37:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/76866431.html
  • echarts
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定