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事件，用於圖表自適應
}