vue 复杂的流程图实现--antv/g6

可以先看下对应的文档:G6 Demos - AntV

npm install --save @antv/g6

实现如图:

javascript 复制代码
<template>
  <div class="drawflow">
    <div id="mountNode"></div>
  </div>
</template>
<script>
import G6 from "@antv/g6";
export default {
  data() {
    return {
      registerEdgeLine: null,
      graph: null,
      registerEdgeNode: null,
    };
  },
  mounted() {
    this.init2();
    this.init();
  },
  methods: {
    init2() {},
    init() {
      const width = document.getElementById("mountNode").clientWidth;
      const spacing = width / 20;
      const anchorPoints = [
        [0.4, 0],
        [0.6, 0],
        [0.4, 1],
        [0.6, 1],
      ];
      //生产水线
      G6.registerEdge("line-production-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", endPoint.x, startPoint.y],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#03b329",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //循环水出水线
      G6.registerEdge("line-circulate-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y - 120],
                ["L", endPoint.x, endPoint.y - 120],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#FFC100",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //循环水进水线
      G6.registerEdge("line-circulate-in-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 120],
                ["L", endPoint.x, endPoint.y + 120],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#FFC100",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //脱盐水站出水线
      G6.registerEdge("line-desalination-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y - 40],
                ["L", endPoint.x, endPoint.y - 40],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#2BFF96",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });

      //污水站出水线
      G6.registerEdge("line-sewage-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y - 80],
                ["L", endPoint.x, endPoint.y - 80],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#8a63f5",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //污水站进水线
      G6.registerEdge("line-sewage-in-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 80],
                ["L", endPoint.x, endPoint.y + 80],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#f37907",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //消耗水线
      G6.registerEdge("line-consume-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 40],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#f30474",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });
      //外排污水水线
      G6.registerEdge("line-sewageConsume-arrow", {
        draw(cfg, group) {
          var startPoint = cfg.startPoint,
            endPoint = cfg.endPoint;
          var keyShape = group.addShape("path", {
            attrs: {
              path: [
                ["M", startPoint.x, startPoint.y],
                ["L", startPoint.x, startPoint.y + 80],
                ["L", endPoint.x, endPoint.y],
              ],
              stroke: "#f36f04",
              lineWidth: 1,
              startArrow: false,
              endArrow: true,
              className: "edge-shape",
            },
          });
          return keyShape;
        },
      });

      G6.registerNode(
        "rectNode",
        {
          drawShape(cfg, group) {
            var keyShape = group.addShape("rect", {
              attrs: {
                width: 35,
                height: 250,
                x: 0,
                y: 0,
                radius: 4,
                lineWidth: 1,
                stroke: "#409eff",
                fill: "#0158CF",
              },
            });
            group.addShape("text", {
              attrs: {
                y: cfg.top || 160,
                x: 12,
                text: cfg.text,
                fill: "#fff",
                lineHeight: 20,
              },
            });

            return keyShape;
          },
        },
        "rect"
      );
      G6.registerNode(
        "textNode",
        {
          drawShape(cfg, group) {
            var keyShape = group.addShape("rect", {
              attrs: {
                width: 50,
                height: 30,
                x: 0,
                y: 0,
                radius: 4,
                lineWidth: 1,
                stroke: "transparent",
                fill: "transparent",
              },
            });
            group.addShape("text", {
              attrs: {
                y: cfg.textY || 25,
                x: cfg.textX || 15,
                text: cfg.text,
                fill: cfg.color || "#03b329",
                lineHeight: 20,
              },
            });

            return keyShape;
          },
        },
        "rect"
      );
      let data = {
        nodes: [
          {
            id: "productionWater",
            x: (3 / 4) * spacing,
            y: 80,
            type: "textNode",
            text: "生产水",
            anchorPoints: [[0, 1]],
          },
          {
            id: "1",
            x: (1 / 2) * spacing,
            y: 150,
            type: "rectNode",
            text: "水\n循\n环\n系\n统",
            anchorPoints: anchorPoints,
          },
          {
            id: "2",
            x: 2 * spacing,
            y: 150,
            text: "脱\n盐\n水\n站",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "3",
            x: 3 * spacing,
            y: 150,
            text: "冷\n凝\n鼓\n风",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "4",
            x: 4 * spacing,
            y: 150,
            text: "脱\n硫\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "5",
            x: 5 * spacing,
            y: 150,
            text: "硫\n铵\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "6",
            x: 6 * spacing,
            y: 150,
            text: "粗\n苯\n蒸\n馏\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "7",
            x: 7 * spacing,
            y: 150,
            text: "终\n冷\n洗\n苯\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "8",
            x: 8 * spacing,
            y: 150,
            text: "制\n酸\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "9",
            x: 9 * spacing,
            y: 150,
            text: "蒸\n氨\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "10",
            x: 10 * spacing,
            y: 150,
            text: "油\n库\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "11",
            x: 11 * spacing,
            y: 150,
            text: "汽\n化\n单\n元",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "12",
            x: 12 * spacing,
            y: 150,
            text: "备\n煤\n系\n统\n焦\n处\n理\n系\n统",
            top: 200,
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "13",
            x: 13 * spacing,
            y: 150,
            text: "炼\n焦\n设\n施",
            type: "rectNode",
            anchorPoints: anchorPoints,
          },
          {
            id: "14",
            x: 14 * spacing,
            y: 150,
            text: "除\n尘\n设\n施",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "15",
            x: 15 * spacing,
            y: 150,
            text: "热\n力\n设\n施",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "16",
            x: 16 * spacing,
            y: 150,
            text: "干\n熄\n焦\n系\n统",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "17",
            x: 17 * spacing,
            y: 150,
            text: "汽\n轮\n发\n电\n站",
            type: "rectNode",
            anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
          },
          {
            id: "18",
            x: 18.5 * spacing,
            y: 150,
            text: "污\n水\n处\n理\n站",
            type: "rectNode",
            anchorPoints: [
              [0.5, 0],
              [0.4, 1],
              [0.6, 1],
            ],
          },
          {
            id: "consumeWater",
            x: 19.5 * spacing,
            y: 410,
            type: "textNode",
            text: "耗水",
            textX: -45,
            color: "#f30474",
            anchorPoints: [[0, 1]],
          },
          {
            id: "sewageConsumeWater",
            x: 19.5 * spacing,
            y: 450,
            type: "textNode",
            text: "外排废水",
            textX: -45,
            textY: 20,
            color: "#f36f04",
            anchorPoints: [[0, 1]],
          },
        ],
        edges: [
          {
            source: "productionWater",
            target: "2",
            type: "line-production-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "3",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "4",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "5",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "6",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "7",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "8",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "9",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "10",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "11",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "12",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "13",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "14",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "15",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "16",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "1",
            target: "17",
            type: "line-circulate-arrow",
            sourceAnchor: 0,
            targetAnchor: 0,
          },
          {
            source: "17",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "17",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "16",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "15",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "14",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "13",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "12",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "11",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "10",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "9",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "8",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "7",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "6",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "5",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "4",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "3",
            target: "1",
            type: "line-circulate-in-arrow",
            sourceAnchor: 2,
            targetAnchor: 2,
          },
          {
            source: "2",
            target: "3",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "4",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "5",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "6",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "7",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "8",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "9",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "10",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "11",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "12",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "13",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "14",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "15",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "16",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "2",
            target: "17",
            type: "line-desalination-arrow",
            sourceAnchor: 1,
            targetAnchor: 1,
          },
          {
            source: "18",
            target: "17",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "18",
            target: "16",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "18",
            target: "15",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "18",
            target: "14",
            type: "line-sewage-arrow",
            sourceAnchor: 0,
            targetAnchor: 4,
          },
          {
            source: "2",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 3,
            targetAnchor: 1,
          },
          {
            source: "17",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "16",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "15",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "14",
            target: "18",
            type: "line-sewage-in-arrow",
            sourceAnchor: 5,
            targetAnchor: 1,
          },
          {
            source: "1",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "3",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "4",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "5",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "6",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "7",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "8",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "9",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "10",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "11",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "12",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "13",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "14",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "15",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "16",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
          {
            source: "17",
            target: "consumeWater",
            type: "line-consume-arrow",
            sourceAnchor: 3,
            targetAnchor: 0,
          },
           {
            source: "18",
            target: "sewageConsumeWater",
            type: "line-sewageConsume-arrow",
            sourceAnchor: 2,
            targetAnchor: 0,
          },
        ],
      };

      this.graph = new G6.Graph({
        container: "mountNode",
        width: width,
        height: 620,
      });
      this.graph.data(data);
      this.graph.render();
    },
  },
};
</script>
<style lang="scss" scoped>
.drawflow {
  height: 100%;
  width: 100%;
  #mountNode {
    width: 100%;
    height: 100%;
  }
}
</style>
相关推荐
程序媛小果5 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长9 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
GIS程序媛—椰子4 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
我血条子呢4 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落5 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据5 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j