vue中使用antv/G6完成流程图

目录

效果展示

后台数据 

处理后台数据 

 安装

完整js代码 

---

效果展示

1. 自定义节点 G6.registerNode
2. 根据后端返回数据生成流程图

后台数据 

返回的类似数据，需要parentId数组即上级节点，主要来完成节点指向箭头的方向

 nodes: [

                {

                    id: "0",

                    label: "开始节点",

                    type: "start-node",

                    parentId: []

                },

                {

                    id: "1",

                    label: "分支节点1",

                    parentId: ['0']

                },

                {

                    id: "2",

                    label: "分支节点2",

                    parentId: ['0']

                },

                {

                    id: "3",

                    label: "分支节点3",

                    parentId: ['0']

                },

                {

                    id: "4",

                    label: "分支节点4",

                    parentId: ['2','3']

                },

                {

                    id: "5",

                    label: "分支节点5",

                    parentId: ['1']

                },

                {

                    id: "6",

                    label: "分支节点6",

                    parentId: ['5']

                },

                {

                    id: "7",

                    label: "分支节点7",

                    parentId: ['5']

                },

                {

                    id: "8",

                    label: "分支节点8",

                    parentId: ['7']

                },

                {

                    id: "9999",

                    label: "结束节点",

                    type: "end-node",

                    parentId: [],

                }

            ]

处理后台数据 

1.加入边集数据

//边集 
edges: [
          // 表示一条从 node1 节点连接到 node2 节点的边
          {
            source: 'node1',
            target: 'node2',
          },
        ],

//edges设置

        this.data.edges = [];

        this.data.nodes.forEach((item) => {

          //parentId中为上级节点即source

          item.parentId.forEach((id) => {

            let json = {

              source: id,

              target: item.id,

            };

            this.data.edges.push(json);

          });

        });

2.关于指向结束节点

//判断倒数第二层

        this.data.edges.forEach((s) => {

          this.allSource.push(s.source);

        });

        //数组去重

        this.allSource =[... new Set(this.allSource)];

        this.data.nodes.forEach((item) => {

          //source中不存在则是倒数第二层 除了结束节点

          if (!this.allSource.includes(item.id) && item.id!=this.data.nodes[this.data.nodes.length - 1].id) {

            this.data.edges.push({

              source: item.id,

              target: this.data.nodes[this.data.nodes.length - 1].id,

            });

          }

        });

 安装

快速上手 | G6A collection of charts made with the Grammar of Graphicshttps://antv-g6.gitee.io/zh/docs/manual/getting-started/

tep 1: 使用命令行在项目目录下执行以下命令：

 npm install --save @antv/g6

Step 2: 在需要用的 G6 的 JS 文件中导入：

import G6 from '@antv/g6';

html

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

完整js代码 

引入

import G6 from "@antv/g6";
import dagre from "dagre";

export default {
  data() {
    return {
      //来源合集 （集合中不存在即说明为倒数第二层节点）
      allSource: [],
      data: {
        nodes:[],
        edges:[]
      },
    };
  },
  mounted() {
    this.getG6Data();
  },
  methods: {
    getG6Data() {
      getG6().then((res) => {
        this.data = res.data;
        //edges设置
        this.data.edges = [];
        this.data.nodes.forEach((item) => {
          //parentId中为上级节点即source
          item.parentId.forEach((id) => {
            let json = {
              source: id,
              target: item.id,
            };
            this.data.edges.push(json);
          });
        });
        //判断倒数第二层
        this.data.edges.forEach((s) => {
          this.allSource.push(s.source);
        });
        //数组去重
        this.allSource =[... new Set(this.allSource)];
        this.data.nodes.forEach((item) => {
          //source中不存在则是倒数第二层 除了结束节点
          if (!this.allSource.includes(item.id) && item.id!=this.data.nodes[this.data.nodes.length - 1].id) {
            this.data.edges.push({
              source: item.id,
              target: this.data.nodes[this.data.nodes.length - 1].id,
            });
          }
        });
        this.startG6();
    });
    },
    startG6() {
      let data = this.copy(this.data);
      var g = new dagre.graphlib.Graph();
      g.setDefaultEdgeLabel(function () {
        return {};
      });
      g.setGraph({
        rankdir: "TB",
      });
      data.nodes.forEach(function (node) {
        // node.label = node.id;
        g.setNode(node.id, {
          width: 150,
          height: 50,
        });
      });
      data.edges.forEach(function (edge) {
        g.setEdge(edge.source, edge.target);
      });
      dagre.layout(g);
      var coord = void 0;
      g.nodes().forEach(function (node, i) {
        coord = g.node(node);
        data.nodes[i].x = coord.x;
        data.nodes[i].y = coord.y;
      });
      g.edges().forEach(function (edge, i) {
        coord = g.edge(edge);
        data.edges[i].startPoint = coord.points[0];
        data.edges[i].endPoint = coord.points[coord.points.length - 1];
        data.edges[i].controlPoints = coord.points.slice(
          1,
          coord.points.length - 1
        );
      });
      G6.registerNode(
        "operation",
        {
          drawShape: function drawShape(cfg, group) {
            var rect = group.addShape("rect", {
              attrs: {
                x: -75,
                y: -25,
                width: 150,
                height: 50,
                radius: 10,
                stroke: "#00C0A5",
                fill: "#92949F",
                fillOpacity: 0.45,
                lineWidth: 2,
              },
            });
            return rect;
          },
        },
        "single-shape"
      );

      G6.registerNode(
        "start-node",
        {
          drawShape: function drawShape(cfg, group) {
            var rect = group.addShape("rect", {
              attrs: {
                x: -75,
                y: -25,
                width: 150,
                height: 50,
                radius: 10,
                stroke: "#fff",
                fill: "#0090ff",
                fillOpacity: 0.45,
                lineWidth: 2,
              },
            });
            return rect;
          },
        },
        "single-shape"
      );

      G6.registerNode(
        "end-node",
        {
          drawShape: function drawShape(cfg, group) {
            var rect = group.addShape("rect", {
              attrs: {
                x: -75,
                y: -25,
                width: 150,
                height: 50,
                radius: 10,
                stroke: "#fff",
                fill: "#0090ff",
                fillOpacity: 0.45,
                lineWidth: 2,
              },
            });
            return rect;
          },
        },
        "single-shape"
      );

      var graph = new G6.Graph({
        container: "mountNode",
        width: window.innerWidth,
        height: window.innerHeight,
        pixelRatio: 2,
        modes: {
          default: ["drag-canvas", "zoom-canvas"],
        },
        defaultNode: {
          // shape: "operation",
          type: "operation",
          labelCfg: {
            style: {
              fill: "#666",
              fontSize: 14,
              fontWeight: "bold",
            },
          },
        },
        defaultEdge: {
          type: "polyline",
          style: {
            endArrow: {
              path: G6.Arrow.triangle(),
            },
            lineWidth: 2,
            stroke: "#ccc",
          },
        },
      });
      graph.data(data);
      graph.render();
      graph.fitView();
    },
    copy(obj) {
      const newobj = obj.constructor === Array ? [] : {};
      if (typeof obj !== "object") {
        return;
      }
      for (const i in obj) {
        newobj[i] = typeof obj[i] === "object" ? this.copy(obj[i]) : obj[i];
      }
      return newobj;
    },
  },
};