- 問題現象
使用ECharts樹圖,在數據維度大,節點過多時,所看到的內容會重疊交錯,無法查看。
- 原因
在給定ECharts樹圖容器尺寸后,無論數據多么龐大或者稀少,數據始終會嘗試在給定容器內撐滿、全部顯示。
- 處理
var container = document.getElementById('chart-panel'); myChart.on('click', function (params) { if (params.componentType === 'series') { // 點擊到了 series 上 if (!params.value) { // 點擊的節點有子分支(可點開) var elesArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls)); var height = 200; // 這里限制最小高 var currentHeight = 10 * (elesArr.length - 1) || 10; // 每項10px var newHeight = Math.max(currentHeight, height); container.style.height = newHeight + 'px'; myChart.resize(); } } });
每次點擊展開或者收縮,都會為ECharts樹圖重新給定一個高度,以此來實現高度自適應。
