ECharts樹圖節點過多時取消縮放,調整容器高度自適應內容變化


  • 問題現象

  使用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樹圖重新給定一個高度,以此來實現高度自適應。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM