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 })