Echarts tree structure, array optimization, handling freeze (note update)

1. Do not use push if the volume is large

push a json object, the object child node is an array with 1000 pieces of data, it cannot be loaded, and the page is stuck

将
treeData.push(JSON.parse(result));

changed to

treeData[0] = JSON.parse(result);

loaded successfully

2. Adaptive order of magnitude, div height and width have boundaries

Optimize the tree topology. Currently, 10,000 devices can be displayed, but 10,000 devices can no longer be seen clearly. This is limited by the browser. After testing, it can only be controlled at 30 times the screen width.

 

 

 //主要就是这里
			    var container = document.getElementById('main');
			    var allNode = 0;
			    var nodes = myChart._chartsViews[0]._data._graphicEls;
			    console.log("节点数：",nodes.length)
			    for (let i = 0, count = nodes.length; i < count; i++) {
			        let node = nodes[i];
			        if (node === undefined)
			            continue;
			        allNode++;
			    }
			    var width = window.innerWidth;
			    var height = window.innerHeight;
			    //计算最大宽度
			    var currentWidth = 40 * allNode;
			    if(currentWidth > width*30){
			    	newWidth = width*30;
			    }else{
			    	newWidth = Math.max(currentWidth, width);
			    }
			    //console.log('----myChart._chartsViews[0]._data._graphicEls:',myChart._chartsViews[0]._data._graphicEls);
			    //console.log('----myChart._chartsViews[0]._data.tree._nodes:',getArrayLayer(treeData,'children',1));
			    //计算最大高度
			    var currentHeihgt = ( 200 * (getArrayLayer(treeData,'children',1)-1) +100);
			    if(currentHeihgt>height*6){
			    	newHeight = height*6;
			    }else{
			    	//newHeight = Math.max(currentHeihgt, height);
			    	newHeight = currentHeihgt;
			    }
			    container.style.width = newWidth + 'px';
			    container.style.height = newHeight + 'px';
			    //option.series[0].height = currentHeihgt + 'px';
			    myChart.resize();
			
			    //setAppScale(newWidth,newHeight);