vue中echarts关系图动态增删节点以及连线

首先，echarts的关系图有个非常坑的地方，就是节点的id必须连续，否则增删之后节点无法连接！

下面是简单的演示实现，实际要用动态增删的话，要复杂的多得多。

我是用的关系图是力引导图

更新后不会重新渲染，只是动态增加的效果

//假设你已经渲染了关系图
test() {
      let option = this.chart.getOption() //获取option配置项

      //START增加节点，假设根据id连线
      // option.series[0].data.push({name: '测试节点', category: 1, id: 6, des: '测试描述'})
      // option.series[0].links.push({source: 0, target: 6, name: '测试连线'})
      //END


      //删除节点START
      let data = option.series[0].data //获取节点数据
      let link = option.series[0].links //获取边的数据
      let flag = -1
      for(let i = 0; i<data.length;i++){//假设删除id为1的节点
        if (data[i].id===1){
          data.splice(i,1)
          link.splice(i-1,1)
          flag = i
          break
        }
      }
      for(let i = flag; i<data.length;i++){
        data[i].id--
        if (i!==data.length){
          link[i-1].target--
        }
      }
      //删除节点END

      //更新关系图
      this.chart.setOption(option)
    },

最后

以上就是称心蛋挞为你收集整理的vue中echarts关系图动态增删节点以及连线的全部内容，希望文章能够帮你解决vue中echarts关系图动态增删节点以及连线所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。