学习进度

Echarts树图节点数据过多时，调整容器高度自适应内容变化。

Q（问题）：Echarts树图节点数据过多时，节点值会重叠，无法正常查看

R（原因）：默认Echarts树图容器设置下，数据无论多大，都会在给定容器内展示，全显。

S（解决）:

　　　

var dom = document.getElementById("container");
       var myChart = echarts.init(dom);
       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 = 12 * (elesArr.length - 1) || 12; // 每项12px，调整叶子节点间的间隔大小
                    var newHeight = Math.max(currentHeight, height);
                    container.style.height = newHeight + 'px';
                    myChart.resize();
                }
            }
        });

 Echarts树图参数说明：

myChart.showLoading();    //显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id')); 
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();    //得到数据后隐藏Loading标志
 
    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });    //间隔展开子数据，animate，display，physics，scale，vis是展开的
 
    myChart.setOption(option = {
        tooltip: {    //提示框组件
            trigger: 'item',    //触发类型，默认：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）。可选：'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
            triggerOn: 'mousemove'    //提示框触发的条件，默认mousemove|click（鼠标点击和移动时触发）。可选mousemove：鼠标移动时，click：鼠标点击时，none：        
        },
        series: [    //系列列表
            {
                type: 'tree',    //树形结构
 
                data: [data],    //上面从flare.json中得到的数据
 
                top: '1%',       //距离上
                left: '7%',      //左
                bottom: '1%',    //下
                right: '20%',    //右的距离
 
                symbolSize: 7,   //标记的大小，就是那个小圆圈，默认7
 
                label: {         //每个节点所对应的标签的样式
                    normal: {
                        position: 'left',       //标签的位置
                        verticalAlign: 'middle',//文字垂直对齐方式，默认自动。可选：top，middle，bottom
                        align: 'right',         //文字水平对齐方式，默认自动。可选：top，center，bottom
                        fontSize: 9             //标签文字大小
                    }
                },
 
                leaves: {    //叶子节点的特殊配置，如上面的树图示例中，叶子节点和非叶子节点的标签位置不同
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },
 
                expandAndCollapse: true,    //子树折叠和展开的交互，默认打开
                animationDuration: 550,     //初始动画的时长，支持回调函数,默认1000
                animationDurationUpdate: 750//数据更新动画的时长，默认300
            }
        ]
    });
});

更多参考：echarts 树图