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

烂漫一生 提交于 2021-02-20 07:36:04
  • 问题现象

  使用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树图重新给定一个高度,以此来实现高度自适应。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!