vue中使用Antv g6构建简单流程图

vue中使用Antv g6构建简单流程图

前端小白第一次使用，项目需要一个流程图，看了一些博客，简单的写了一个，但是还是没实现项目的需求，希望有会的人帮忙指点一下。项目需要实现的是：可以自定义添加节点以及删除节点，这两个我还没有实现。

1.首先安装

npm install --save @antv/g6

2.在需要g6的文件中导入

import G6 from "@antv/g6";

3.在组件中创建一个容器

<template>
  <div id="Flow"></div>
</template>

4.设置节点和边

<script>
import G6 from "@antv/g6";
export default {
  data() {
    return {
      graph:'',
      data:[],
      measure: [
        {
          name: "救助力量协调",
          id:'coordinate',
        },
        {
          name: "应急物资选择",
          id:'choose',
        },
        {
          name: "搜救区域计算",
          id:'calculate',
        },
        {
          name: "信息发布",
          id:'issue'
        },
      ],
      
    };
  },
  
  mounted() {
    this.data = {
        //节点
      nodes: [
        {
          id: "dangerous",
          label: "险情接报",
          x: 80,
          y: 70,
        },
        {
          id: "message",
          label: "信息核实",
          x: 80,
          y: 170,
        },
        {
          id: "dispose",
          label: "应急处置",
          x: 80,
          y: 270,
        },
        {
          id: "conclusion",
          label: "处置总结",
          x: 80,
          y: 370,
        },
        {
          id: "assess",
          label: "应急评估",
          x: 80,
          y: 470,
        },
        {
          id: "coordinate",
          label: "救助力量协调",
          x: 200,
          y: 120,
        },
        {
          id: "choose",
          label: "应急物资选择",
          x: 200,
          y: 190,
        },
        {
          id: "calculate",
          label: "搜救区域计算",
          x: 200,
          y: 260,
        },
        {
          id: "issue",
          label: "信息发布",
          x: 200,
          y: 330,
        },
      ],
        //边
      edges: [
        {
          source: "dangerous",  //起点id
          target: "message",   //目标点id
        },
        {
          source: "message",
          target: "dispose",
        },
        {
          source: "dispose",
          target: "conclusion",
        },
        {
          source: "conclusion",
          target: "assess",
        },
        {
          source: "dispose",
          target: "coordinate",
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            },
            startArrow:{
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            }
          },
        },
        {
          source: "dispose",
          target: "choose",
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            },
            startArrow:{
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            }
          },
        },
        {
          source: "dispose",
          target: "calculate",
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            },
            startArrow:{
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            }
          },
        },
        {
          source: "dispose",
          target: "issue",
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            },
            startArrow:{
              path: G6.Arrow.triangle(5, 5, 45), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 45,
            }
          },
        },
      ],
    };
    this.graph = new G6.Graph({
      container: "Flow", // 指定挂载点
      // 画布宽高
      width: 274,
      height: 550,
      linkCenter: true,
      //节点配置样式
     
      defaultNode: {
        type: "rect",
        size:[80,30],
        style: {
          fill: "#409EFF",
        },
        labelCfg: {
          positions: "center",
          // 节点上的标签文本样式配置
          style: {
            fill: "#fff", // 节点标签文字颜色
          },
        },
      },
      //边的样式配置
      defaultEdge: {
        type: "line",
        // 边样式配置
        style: {
          stroke: "#409EFF", // 边描边颜色
          endArrow: {
            path: G6.Arrow.triangle(5, 5, 25), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
            d: 25,
            fill: '#409EFF',
            opacity: 0.5,
            lineWidth: 1,
          },
          startArrow:{
            path: G6.Arrow.triangle(5, 5, 25), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
            d: 25,
            fill: '#409EFF',
            opacity: 0.5,
            lineWidth: 1,
          }
        },
        labelCfg: {
          position:'center'
        },
      },
    });
    //读取数据
    this.graph.data(this.data);
    // 渲染图
    this.graph.render();
    // console.log(this.data)
  },
  methods:{
  //添加节点
    addSave() {
      this.measure.push({ name: this.addinput ,id:'abc'});
      // console.log(div)
      this.data.nodes.push({
        id: this.id,
        label: this.addinput,
        x: 200,
        y: 400,
      });
    
      // 读取数据
      this.graph.data(this.data);
      // 渲染图
      this.graph.render();
    },
    
  }
};
</script>

5.效果图

需要实现的是在右侧点击添加时添加一个节点，点红色按钮删除节点，1是我新增的节点，但是边添加不上，节点的每一个都是给了固定的位置，如果只要流程图是可以给固定的位置，但是新增的话给一个固定的位置是不合理的，目前只做到了这里。希望有会的人帮忙指点一下。拜托！！!