ECharts树图节点过多时取消缩放，调整容器高度自适应内容变化

Z时代
2024-01-10
分类：综合

coding

问题现象

　　使用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();
        }
    }});