Echarts中tree结构图痛点解析----- 解决（很多节点图被压缩的很小；roam开启后有个bug）

1. 正交向图：无法自动撑开容器，当节点很多时会无限的压缩节点间的空隙，导致图表很难看；

2. 开启roam选项后，拖动图表，之后再点击根节点的时候收缩时，图表会消失到容器外；（这个就很难受的bug，目前只是间接的重绘图表解决）

 

上图就是效果图。

下面附上主要代码：（具体代码在附件里，需要的请下载）

draw_tree_chart() {
    this.tree_chart_cav = this.$echarts.init(document.getElementById('tree_chart'));
    this.generate_tree_chart();
    this.tree_chart_cav.on('click', {seriesIndex: 0}, (event_obj) => {
        console.log("event_obj =", event_obj);
        /*1、根据节点个数扩展所在图层的大小；可以解决动态改变图层的高度，不收缩原图（导致越来越小）*/
        /*var container = document.getElementById('tree_chart');
        var allNode = 0;
        var nodes = tree_chart_cav._chartsViews[0]._data._graphicEls;
        for (var i = 0, count = nodes.length; i < count; i++) {
            var node = nodes[i];
            if (node === undefined)
                continue;
            allNode++;
        }
        var height = 600;
        var currentHeight = 45 * allNode;
        var newWidth = Math.max(currentHeight, height);
        container.style.width = window.innerWidth + 'px';
        container.style.height = newWidth + 'px';
        tree_chart_cav.resize();*/
        /*2、解决roam打开时，移动图表，再收缩根节点之后，图表消失bug*/
        if(event_obj.data.level===0){//此时点击的节点为根节点
            this.generate_tree_chart();
        }

    });
    if($.inArray(this.tree_chart_cav,this.curr_charts)===-1){
        this.curr_charts.push(this.tree_chart_cav);
    }
    this.chart_resize_auto();//首次加载图表时主动触发一次resize事件，用于图表自适应
}