创建垂直连接的树状图:Echart实现指南
P粉071559609
P粉071559609 2023-09-15 15:25:10
[JavaScript讨论组]

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

这是我期望的结果。 在此输入图像描述

P粉071559609
P粉071559609

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号