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

最新推荐文章于 2026-07-14 22:56:40 发布

原创最新推荐文章于 2026-07-14 22:56:40 发布 · 2k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了Echarts关系图中动态增加和删除节点的实现过程，强调了节点ID连续性的重要性。在力引导图模式下，通过修改option配置项来实现节点和链接的增删，并展示了更新关系图的方法。在实际应用中，这个过程可能更为复杂。

首先，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)
    },

标签