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

最新推荐文章于 2023-11-14 19:54:44 发布
最新推荐文章于 2023-11-14 19:54:44 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： css vue 文章标签： 流程图 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/killerdoubie/article/details/134060901
版权
vue 同时被 2 个专栏收录
42 篇文章 0 订阅
订阅专栏
css
18 篇文章 0 订阅
订阅专栏

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

 npm install --save @antv/g6

实现如图：

<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>

 

祝你今天也快乐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+antv@g6实现表格内容连接以及表格内容可编辑
simple8973的博客
03-08 571
vue+antv@g6实现表格内容之间连接线，并通过展开、隐藏联动变换连接图
Vue 仿钉钉流程图（流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo）
热门推荐
xiaoyaoluntian的博客
09-29 2万+
仿钉钉流程图（流程节点绘制 vue+Ant Design of Vue） 仿钉钉流程图 Api包括：一维数组传参，获取单节点数据，返回所有节点组成的一位数组 生成每个节点的父节点Id集合 很多公司后台管理系统都需要画流程图，功能大同小异，所以，仿照钉钉管理系统 花了一个流程图 效果如下 以下为此插件 入口与出口的数据结构，暴露的事件以及公共类所在目录及修改方式 （小部分需要修改源代码，不难找，有问题可以call我） 入口数据格式 整个流程图分为四种节点 分别为 root en
Vuex和antv/g6实现在线绘制分析流程图功能
良月零五的码窝
08-26 5915
流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况，所以本文章仅抽取最基础的部分介绍流程图创建、节点链接、节点删除、菜单操作、重新渲染、本地存储的简单交互部分介绍。仅供有类似需求的小伙伴参考！ 效果图如下： 实现效果： 1、默认算子读取以及算子入点和出点设置 2、算子拖拽到画布，节点任意链接 3、节点删除以及节点线连接 4、画布右键菜单操作、快捷键删除等 5、数据保存以及重新渲染 6、不同模式操作支持 （1）安装相关依赖组件 1、 流程图绘制是
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分简单演示流程图创建、节点链接、节点删除、菜单操作、重新渲染、本地存储的交互。仅供有类似需求的小伙伴参考使用。如遇bug请自行思考修复，本博主懒，概不负责解决修复bug问题....
使用antv/g6在Vue中实现流程图
ssy001128的博客
06-30 3168
vue 中使用antv/g6插件查出流程图，前面还用过bpmn插件，效果没有这个好
antv G6绘制流程图
peppa_pig的博客
12-15 8447
先贴上实现的效果图 G6官网，按照官网可以绘制出简单的流程 但是当实际绘制流程图时，简直是要被连接线的折点给搞崩溃 <template> <div id="mountNode"> </div> </template> <script> import utils from "@/plugin/utils"; import G6 from '@antv/g6'; import insertCss from 'inse..
AntV G6自定义流程图Graph
weixin_45594156的博客
07-14 2603
前言：自定义流程图节点样式、节点可拖动，节点文字过长省略，文字过长的节点悬浮展示tooltip插件悬浮框，修改tooltip悬浮框样式。 Dagre 流程图调用组件传值给mapData，这里只是自己演示设置了假数据a 四、这里提供了直接改官方示例数据，简单的参考 在官方图表示例找到Dagre 流程图
企业级开发中，开箱即用的VUE流程图开发组件 AntV G6
u010818438的专栏
10-10 5316
企业级应用开发往往需要使用流程图组件，AntV G6就是一款可以开箱即用的由蚂蚁金服提供的，全新一代数据可视化解决方案，是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
GGEditor基于G6和React的可视化图编辑器可用于画流程图思维导图
08-10
GGEditor 基于 G6 和 React 的可视化图编辑器，可用于画流程图 思维导图
vue3+antv x6+tsx 制作自定义流程图
09-23
1.使用vue3+antv x6+tsx制作自定义流程图 2.实现自定义拖拉组件。 3.支持自定义拓展。
vue-shape.rar
02-05
x6-vue-shape在（antv-x6+vue2+js）中的使用
antv-g6—在vue项目中实现网格拓扑流程图自定义绘制
前端探险家的博客
06-22 5208
这个是自己写着玩的，利用@antv/g6自定义绘制流程图，然后保存到localstorage中，在左侧表格展示，还可以通过表格操作来查看对应的流程图以及删除；这里特别注意一下，，vue版本是2.5.x；下面我会把实现代码全部粘贴出来，不需要需改，开袋即食，放到你的项目中直接可以展示；代码中我也会加上注释，不懂的可以看注释；
antv/g6结合vue实现某一流程的流程图展示
CH-EN.的博客
02-25 4587
antv/g6结合vue实现某一流程的展示 安装antv/g6 npm install --save @antv/g6 注意版本控制 目前版本已经更新到4.x 以下代码使用的是3.1.3版本的 引入 importG6from'@antv/g6'; 展示效果 本文主要实现的需求是，配合后端模板引擎，展示某一业务的实现流程与完成状态，根据nodes数据中status判断节点处于什么状态改变样式； 创建js文件，引入g6 传入容器的宽高，容器id，数据源，当时创建容器的...
antv G6在vue项目中的实践总结
小易不止于搬砖的博客
09-08 6579
antvG6树图 自定义节点、边；数据更新后重新渲染以及tooltip的使用
vue antv-G6树图的摸索总结—新手入门
想卷回去的小菜鸡的博客
07-06 1万+
通过antvG6官网内置API实现树图的加载绚烂，以及对各个属性进行详细讲解，把过程中遇到的问题以及解答方案一一列举，随着各种需求，不断更新。
使用antv/G6，实现自定义节点流程图
最新发布
m0_60666754的博客
11-14 2324
初始化的图数据，是一个包括 nodes （节点）数组和 edges （线）数组的对象。图一是鼠标移出隐藏连接点，图二是鼠标移入显示连接点。第二排图标是第一排拖拽出来的。第一排小图标是可拖拽的。添加事件，让图片可拖拽。
These dependencies were not found: * @antv/g6-core/lib/item/item in ./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/.store/babel-loader@8.3.0/node_modules/babel-loader/lib!./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/.store/vue-loader@15.10.1/node_modules/vue-loader/lib??vue-loader-options!./src/views/common/SceneG6.vue?vue&type=script&lang=js& * @antv/util in ./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/.store/babel-loader@8.3.0/node_modules/babel-loader/lib!./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/.store/vue-loader@15.10.1/node_modules/vue-loader/lib??vue-loader-options!./src/views/Attribute.vue?vue&type=script&lang=js& * graphlib/lib/json in ./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/.store/babel-loader@8.3.0/node_modules/babel-loader/lib!./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/.store/vue-loader@15.10.1/node_modules/vue-loader/lib??vue-loader-options!./src/views/common/SceneRule.vue?vue&type=script&lang=js& * lodash/_initCloneByTag in ./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/.store/babel-loader@8.3.0/node_modules/babel-loader/lib!./node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/.store/vue-loader@15.10.1/node_modules/vue-loader/lib??vue-loader-options!./src/views/Object.vue?vue&type=script&lang=js&
06-03
这看起来像是一个依赖问题，你的项目似乎缺少一些依赖项，其中包括 @antv/g6-core/lib/item/item、@antv/util、graphlib/lib/json 和 lodash/_initCloneByTag。你可以尝试运行 npm install 命令来安装这些缺失的依赖项。如果问题仍然存在，你可能需要检查你的 package.json 文件中的依赖项是否正确，并尝试更新它们的版本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值