echarts tree 點擊動態添加子集實例

  下邊是echarts官網的例子 我只是在底部加了一個點擊事件以及點擊的時候動態添加子集
效果圖：

 

 

  1 myChart.showLoading();
$.get(ROOT_PATH + 'data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });
       //上面這部分用的時候可以去掉，至於json數據可以用自己的，格式{name：",children:[{name:'',children[]}]},根據自己實際情況添加數據，也可在里面添加value用於判斷用，
         用這個實例之前必須先獲取dom節點，綁定id之后設置一個變量例如：

 

        這里的myChart可以用this.echartTreeBj代替

    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',

                data: [data],

                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',

                symbolSize: 7,

                label: {
                    normal: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    }
                },

                leaves: {
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});
myChart.on("click", function(param){
 54     console.log(param)
 55      if (typeof param.seriesIndex == 'undefined') {
 56                     return;
 57             }
 58         if (param.type == 'click') {
 59              if (!param.data.hasChild) {
 60                  //param.data.collapsed=true;
 61                  console.log(param.data.collapsed);
 62                  if(param.data.collapsed == undefined || param.data.collapsed == true){
 63                      console.log("未定義或者是未展開，下次即將展開");
 64                      param.data.collapsed=false;
 65                  }else{
 66                     console.log("下次不展開");
 67                      param.data.collapsed=true;
 68                      return;
 69                  }
 70                  
 71              }
 72             param.data.children.push({name:"子部門測試",children:[]});//這里可以修改你動態獲取到的數據在此賦值到data里面
 73             param.data.hasChild =false; 
 74             param.data.collapsed=false;
 75             
 76             console.log(param.data);
 77             console.log(myChart.getOption().series[0].data);
 78             data = myChart.getOption().series[0].data;
 79             myChart.clear();
 80             myChart.setOption(option = {
 81                 tooltip: {
 82                     trigger: 'item',
 83                     triggerOn: 'mousemove'
 84                 },
 85                 series: [
 86                     {
 87                         type: 'tree',
 88             
 89                         data: data,
 90                         initialTreeDepth: 1,
 91                         top: '1%',
 92                         left: '7%',
 93                         bottom: '1%',
 94                         right: '20%',
 95             
 96                         symbolSize: 7,
 97             
 98                         label: {
 99                             normal: {
100                                 position: 'left',
101                                 verticalAlign: 'middle',
102                                 align: 'right',
103                                 fontSize: 9
104                             }
105                         },
106             
107                         leaves: {
108                             label: {
109                                 normal: {
110                                     position: 'right',
111                                     verticalAlign: 'middle',
112                                     align: 'left'
113                                 }
114                             }
115                         },
116             
117                         expandAndCollapse: true,
118                         animationDuration: 100,
119                         animationDurationUpdate: 0
120                     }
121                 ]
122             });
123         }
124 })