业务显示的是数据库的字段对应关系，都是1对1的关系。因此不考虑增加高度，高度改变的网上有很多教程。此例子是宽度随着层级的改变而改变。
HTML结构：
<div class="col-sm-12" style="overflow-x: scroll;">
<div id="showactivechart" style="height: 800px;width: 100%"></div>
</div>
JS逻辑：
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [data],//data取自ajax
top: '1%',
left: '15%',
bottom: '1%',
right: '15%',
symbolSize: 7,
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
}
},
tooltip: {
formatter: function (a) {
return a.data.name;
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true,
initialTreeDepth: 1,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
//当用户点击层级的时候
var maxDepth = 2;
myChart.on('click',function(params){
if(params.componentType === 'series'){
if(!params.value){
var dataIndex = params.dataIndex;
var isExpand = false;
const nodes = myChart._chartsViews[0]._data.tree._nodes;
for(var i = 0 ;i < nodes.length ; i ++){
if(nodes[i].dataIndex === dataIndex){
if(nodes[i].children.length == 0){
return false;
}else{
isExpand = nodes[i].isExpand ;
maxDepth = isExpand maxDepth : 2;
break;
}
}
}
for(var i = 0 ;i < nodes.length ; i ++){
if(nodes[i].depth == 2 && nodes[i].isExpand){
for(var j = i + 1 ; nodes[j].isExpand; j++){
maxDepth = Math.max(nodes[j].depth,maxDepth)
}
}
}
console.log('isExpand: '+ isExpand,' maxDepth: '+maxDepth);
if(maxDepth>3){//设置的超过3个层级，改变宽度
cotainer.style.width = (100 + (maxDepth - 3)*20)+'%' ;
myChart.resize()
}else{
cotainer.style.width = '100%' ;
myChart.resize()
}
}
}
})