使用VUE+ANTV_G6 完成流程關系圖2

使用VUE+ANTV_G6 完成流程關系圖2

安裝依賴：npm install @antv/g6

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

<script>
import G6 from "@antv/g6";
export default {
  data() {
    return {
      gg: {
        nodes: [
          {
            id: "1",
            dataType: "hg",
            name: "BEGIN" + "\n" + "A",
            // size: 40,//字體大小
            // visible: true,//控制是否隱藏
            // label: "BEGIN根據專營店ID查詢大區小區", //文本
            // type: "circle",//圓形===映射節點的形狀
            // lineWidth: 22, //映射邊的粗細
            labelCfg: {
              positions: "center", // 標簽的屬性，標簽在元素中的位置
              style: {
                // 包裹標簽樣式屬性的欄位 style 與標簽其他屬性在資料結構上并行
                fontSize: 20, // 標簽的樣式屬性，文字字體大小
                fill: "#000", // 樣式屬性，元素的填充色
                // stroke: "#888", // 樣式屬性，元素的描邊色
                // opacity: "0.3", //透明度
              },
            },
          },

          {
            id: "2",
            dataType: "hg",
            name: "A" + "\n" + "B",
            // label: "A校驗計劃周、推薦數、浮動上下限資料",
          },
          {
            id: "3",
            dataType: "alps",
            name: "B" + "\n" + "C",
          },
          {
            id: "4",
            dataType: "sql",
            name: "UPDATE_A" + "\n" + "D",
          },
          {
            id: "5",
            dataType: "sql",
            name: "UPDATECHECK" + "\n" + "E",
          },
          {
            id: "6",
            dataType: "sql",
            name: "UPDATE" + "\n" + "F",
          },
          {
            id: "7",
            dataType: "sql",
            name: "UPDATE_B" + "\n" + "G",
          },
          {
            id: "8",
            dataType: "sql",
            name: "ADD_A" + "\n" + "H",
          },
          {
            id: "9",
            dataType: "sql",
            name: "ADD" + "\n" + "I",
          },
          {
            id: "10",
            dataType: "sql",
            name: "EXIT" + "\n" + "J",
          },
        ],
        edges: [
          {
            source: "1",
            target: "2",
          },
          {
            source: "2",
            target: "3",
          },
          {
            source: "2",
            target: "10",
            // 線條備注
            label: "DATACHECK",
          },
          {
            source: "3",
            target: "4",
            label: "U",
          },
          {
            source: "3",
            target: "8",
            label: "A",
          },
          {
            source: "4",
            target: "5",
            label: "DATACHECK",
          },
          {
            source: "4",
            target: "10",
          },
          {
            source: "5",
            target: "6",
          },
          {
            source: "5",
            target: "10",
            label: "FIELDCHECK",
          },
          {
            source: "6",
            target: "7",
          },
          {
            source: "7",
            target: "10",
          },
          {
            source: "8",
            target: "10",
          },
          {
            source: "8",
            target: "9",
          },
          {
            source: "9",
            target: "10",
            label: "DATACHECK",
          },
        ],
      },
    };
  },
  mounted() {
    this.g6();
  },
  methods: {
    g6() {
      G6.registerNode(
        "sql",
        {
          drawShape(cfg, group) {
            const rect = group.addShape("rect", {
                //設定圖中表格的文字距離位置
              attrs: {
                x: -100,
                y: -50,
                width: 210,  //每個框框的大小
                height: 100,
                radius: 10,
                stroke: "#5B8FF9",//name屬性字體顏色
                fill: "#C6E5FF",
                lineWidth: 3,
              },
              name: "rect-shape",
            });
            if (cfg.name) {
              group.addShape("text", {
                attrs: {
                  text: cfg.name,
                  x: 0,
                  y: 0,
                  fill: "#000",
                  fontSize: 16,
                  textAlign: "center",
                  textBaseline: "middle",
                  // fontWeight: "bold",
                },
                name: "text-shape",
              });
            }
            return rect;
          },
        },
        "single-node"
      );
      const width = document.getElementById("main").scrollWidth;
      const height = document.getElementById("main").scrollHeight || 500;
      const graph = new G6.Graph({
        container: "main",
        width,
        height,
        layout: {
          type: "dagre", //布局  默認Random
          nodesepFunc: (d) => {
            if (d.id === "3") {
              return 200; //id為3的間距
            }
            if (d.id === "7") {
              return 200;//id為7的間距
            }
            return 60;
          },
          ranksep: 40,
          controlPoints: true,
        },
        defaultNode: {
          type: "sql",//默認使用上面設定的類
        },
        defaultEdge: {
          type: "polyline",
          style: {
            radius: 20,
            offset: 45,
            endArrow: true,
            lineWidth: 2,
            stroke: "#C2C8D5",
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: "#d9d9d9",
            fill: "#5394ef",
          },
          //   滑鼠 hover 上節點，即 hover 狀態為 true 時的樣式
          hover: {
            fill: "lightsteelblue",
          },
        },
        modes: {
          default: [
            "drag-canvas",
            "zoom-canvas",
            "click-select",
            "drag-node", //允許拖拽畫布，放碩訓布、拖拽節點
            {
              type: "tooltip",
              formatText(model) {
                const cfg = model.conf;
                const text = [];
                cfg.forEach((row) => {
                  text.push(row.label + ":" + row.value + "<br>");
                });
                return text.join("\n");
              },
              offset: 30,
            },
          ],
        },
        fitView: true,
      });
      // 滑鼠進入節點
      graph.on("node:mouseenter", (e) => {
        const nodeItem = e.item; // 獲取滑鼠進入的節點元素物件
        graph.setItemState(nodeItem, "hover", true); // 設定當前節點的 hover 狀態為 true
      });
      // 監聽滑鼠離開節點
      graph.on("node:mouseleave", (e) => {
        const nodeItem = e.item;
        // 設定目標節點的 hover 狀態 false
        graph.setItemState(nodeItem, "hover", false);
      });
      graph.data(this.gg);
      graph.render();
    },
  },
};
</script>

<style >
#main {
  width: 1000px;
  height: 1000px;
}
</style>