There is too much data in the eharts tree diagram. The display is all overlapping. There are too many sub-levels and the solution is not all displayed.

1. There are too many sub-levels, not all are displayed, and you have to click to expand them.

Number of levels: initialTreeDepth, the default is level 2. If you give this value a larger value, more children will be displayed.

series: [
            {
              type: 'tree',

              data: [data],

              top: '5%',
              left: '8%',
              bottom: '5%',
              right: '7%',

              symbolSize: 15,
              lineStyle: {
                color: '#67BC4A',
              },

              label: {
                position: 'bottom', //标签的位置。
                verticalAlign: 'top', //文字垂直对齐方式,默认自动。
                align: 'center', //文字水平对齐方式,默认自动。
                fontSize: 15, //文字的字体大小            
              },
              initialTreeDepth:20,
              itemStyle: {
                color: '#ffffff',
                borderColor: '#67BC4A',
              },
              leaves: {
                label: {
                  position: 'bottom',
                  verticalAlign: 'top',
                  align: 'center',
                  fontSize: 12, //文字的字体大小
                },
              },
              emphasis: {
                focus: 'descendant',
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750,
            },

2. There is too much data and the displays all overlap.

Height can be calculated dynamically

var chartDom = document.getElementById('container')
this.chart = echarts.init(chartDom)
var option ={} //此处省略,上面有
option && this.chart.setOption(option)
var allNode = 0;
      var nodes = this.chart._chartsViews[0]._data._graphicEls;
      console.log(nodes.length);
      // 大于35个在计算高度
      if(nodes.length>35){ 
        for (var i = 0, count = nodes.length; i < count; i++) {
          var node = nodes[i];
          if (node === undefined)
            continue;
          allNode++;
        }
        var height = window.innerHeight;
        var currentHeight = 35 * allNode;
        var newWidth = Math.max(currentHeight, height);
        this.height = newWidth
        console.log('currentHeight',currentHeight,',height',newWidth)
        // chartDom.style.width = window.innerWidth + 'px';
        chartDom.style.height = newWidth + 'px';
        this.chart.resize();
      }

Guess you like

Origin blog.csdn.net/qq_26841153/article/details/127749769