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