1、展示图形的div:
<div style="height: 750px; width: 1260px; margin-top: 5px; margin-left: 3px; overflow-y:auto;" id="chart3"></div>
2、通过计算展开节点的数量,得到树形图实际需要的高度
var mydom=document.getElementById("chart3");
myCharts = echarts.init(mydom);
myCharts.setOption(MyOption);
var len = 1;// 默认一个跟节点
// treeData为树形图所需的数据
//nodeMap记录节点点击次数,奇数为展开偶数为折叠
if(treeData && treeData.childrenNum >0){
if(nodeMap.get(treeData.code) %2 ==1){
len = treeData.childrenNum;
var childs = treeData.children;
for(i=0;i<childs.length;i++){
// 由于我的图形只有4级,而且只需要记录到二级点击的展开情况,所以是一次for循环
// 需要根据实际情况,记录相应节点的展开情况
if(nodeMap.get(childs[i].code) != undefined && nodeMap.get(childs[i].code) % 2 ==1){
len = len + childs[i].childrenNum;
}
}
}
}
// 设置展示区的高度
if(len < 15){
document.getElementById('chart3').style.height= '750px';
}else{
document.getElementById('chart3').style.height= (len * 35) + 'px';
}
// 重新设置树形图的尺寸
myCharts.resize();
myCharts.on('click', myDrawNodes);
3、nodeMap用于记录每个节点的点击次数,节点的唯一标志是code属性:
var nodeMap = new Map();
nodeMap.set('001',1);//001是根节点的code
function myDrawNodes(item){
if(item.data.code.length>6){
// 因为只要记录到二级节点的展开情况,所以code长度大于6也就是3级以下的节点,展开数一律置位折叠
nodeMap.set(item.code,0)
}else{
if(nodeMap.get(item.data.code) == undefined){
nodeMap.set(item.data.code,1)
}else{
nodeMap.set(item.data.code,nodeMap.get(item.data.code) +1)
}
}
// 动态获取点击节点的子节点数据
getClientTreeData(item);
}