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

目录

• echarts关系图动态增删节点及连线
• echarts关系图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 
 

echarts关系图vue完整代码

vue 使用echarts 实现关系图，效果如下：

说明： 关系图可以有两种，一种是指定坐标x，y。 另外一种就是通过设置series属性

layout: "force",
force: {
          repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
          gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
          edgeLength: [20, 200], //边的两个节点之间的距离，这个距离也会受 repulsion:[10, 50]值越小则长度越长
          layoutAnimation: false,
        },

vue全部代码如下

resize文件如下：debounce可以自行实现

import {
  debounce
} from "@/utils/utils.js";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initListener();
  },
  beforeDestroy() {
    this.destroyListener();
  },
  deactivated() {
    this.destroyListener();
  },
  methods: {
    initListener() {
      window.addEventListener("resize", debounce(this.resize, 100));
    },
    destroyListener() {
      window.removeEventListener("resize", this.resize);
    },
    resize() {
      const {
        myChart
      } = this;
      myChart && myChart.resize();
    },
  },
};

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。