echarts树形图高度自适应

原创
08/28 09:37
阅读数 74

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

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部