echarts树图动态添加子节点

宝子们，echarts原官网很卡，我建议直接看这个中文ecahrts网站

Apache ECharts 中文网

效果预览图：

目录

动态添加子节点流程和思路：

一，监听点击事件

[二 通过点击事件添加新的数据](#二 通过点击事件添加新的数据)，

---

动态添加子节点流程和思路：

1.在初始化函数中监听echarts树图的点击事件，通过点击可以拿到当前节点的节点数据，这个节点数据是一个对象。

2.这个节点数据改变当前图标实例的数据也会改变，但是视图没有发生变化，需要我们调用setoption刷新视图。我们通过点击事件拿到的节点数据，通过发起请求拿到后端接口给的数据，使用push函数（我用的vue2，所以要用push，vue3的只要能添加到children中什么方法都可以）添加到节点数据的.data.children属性中(树图子节点默认是children属性)。

3.调用setoption方法更新视图。

一，监听点击事件

//在初始化函数

中初始图标并监听点击事件

 initChart() {
       // .....
      //是否需要重新init
      if (this.chart == null) {
        this.chart = echarts.init(document.getElementById('chart'));
      }
      this.chart = echarts.getInstanceByDom(document.getElementById('chart'));
        //setoption函数
      this.chart.setOption({
         ///.....
      });
        //调用哲哲函数先用off清除了全部的监听事件
      this.chart.off();
      //监听点击事件
      this.chart.on("click", (params) => {
        this.chartClick(params);
      });
    },

//点击事件
chartClick(params){
    //函数逻辑
    ...
}

通过树图实例的.on事件绑定了一个点击事件，这时候点击树节点就会触发 chartClick点击事件

二 通过点击事件添加新的数据，并更新视图

首先，点击事件要做一个判断，如果点击的节点没有子节点了，我们就加载数据，如果有子节点了，我们要让他收起来。

基于这个判断，通过点击事件传递的参数，也是绑定.on事件时树图实例拿到的参数，可以看到如下

点击图中的生物多样性节点，可以拿到此时的节点信息，从而可以根据拿到的节点数据，发起接口请求拿到数据，添加到 图中的data属性下的children属性中。

完整函数如下

chartClick(item) {

        //如果节点有子节点，则不是叶子节点不需要加载数据
      if (item.data.children) {
        return;
      } else {
        let addList=[]
        //....接口获取数据步骤
        //将要添加的数据添加到addlist中，之后循环加到当前节点的数据中
        //给当前子节点添加children属性
        this.$set(item.data, "children", []);
        //循环添加子节点
        addList.forEach((v) => {
          item.data.children.push({
            name: v.name,
            value: v.id,
            desc: v.knowledgeTitle,
          });
        });
        //获取添加后数据的实例的对象，调用setoptions更新树图
        let series = this.chart._model.option.series;
        this.chart.setOption({ series: series });
      }
    },

这样就可以实现动态添加子节点的功能，代码经过删减，但是实现思路是这样，可以改写代码以达到自己想实现的功能。