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

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

     npm install --save @antv/g6

    实现如图：

    2. <script>
    3. import G6 from "@antv/g6";
    4. export default {
    5.   data() {
    6.     return {
    7.       registerEdgeLine: null,
    8.       graph: null,
    9.       registerEdgeNode: null,
    10.     };
    11.   },
    12.   mounted() {
    13.     this.init2();
    14.     this.init();
    15.   },
    16.   methods: {
    17.     init2() {},
    18.     init() {
    19.       const width = document.getElementById("mountNode").clientWidth;
    20.       const spacing = width / 20;
    21.       const anchorPoints = [
    22.         [0.4, 0],
    23.         [0.6, 0],
    24.         [0.4, 1],
    25.         [0.6, 1],
    26.       ];
    27.       //生产水线
    28.       G6.registerEdge("line-production-arrow", {
    29.         draw(cfg, group) {
    30.           var startPoint = cfg.startPoint,
    31.             endPoint = cfg.endPoint;
    32.           var keyShape = group.addShape("path", {
    33.             attrs: {
    34.               path: [
    35.                 ["M", startPoint.x, startPoint.y],
    36.                 ["L", endPoint.x, startPoint.y],
    37.                 ["L", endPoint.x, endPoint.y],
    38.               ],
    39.               stroke: "#03b329",
    40.               lineWidth: 1,
    41.               startArrow: false,
    42.               endArrow: true,
    43.               className: "edge-shape",
    44.             },
    45.           });
    46.           return keyShape;
    47.         },
    48.       });
    49.       //循环水出水线
    50.       G6.registerEdge("line-circulate-arrow", {
    51.         draw(cfg, group) {
    52.           var startPoint = cfg.startPoint,
    53.             endPoint = cfg.endPoint;
    54.           var keyShape = group.addShape("path", {
    55.             attrs: {
    56.               path: [
    57.                 ["M", startPoint.x, startPoint.y],
    58.                 ["L", startPoint.x, startPoint.y - 120],
    59.                 ["L", endPoint.x, endPoint.y - 120],
    60.                 ["L", endPoint.x, endPoint.y],
    61.               ],
    62.               stroke: "#FFC100",
    63.               lineWidth: 1,
    64.               startArrow: false,
    65.               endArrow: true,
    66.               className: "edge-shape",
    67.             },
    68.           });
    69.           return keyShape;
    70.         },
    71.       });
    72.       //循环水进水线
    73.       G6.registerEdge("line-circulate-in-arrow", {
    74.         draw(cfg, group) {
    75.           var startPoint = cfg.startPoint,
    76.             endPoint = cfg.endPoint;
    77.           var keyShape = group.addShape("path", {
    78.             attrs: {
    79.               path: [
    80.                 ["M", startPoint.x, startPoint.y],
    81.                 ["L", startPoint.x, startPoint.y + 120],
    82.                 ["L", endPoint.x, endPoint.y + 120],
    83.                 ["L", endPoint.x, endPoint.y],
    84.               ],
    85.               stroke: "#FFC100",
    86.               lineWidth: 1,
    87.               startArrow: false,
    88.               endArrow: true,
    89.               className: "edge-shape",
    90.             },
    91.           });
    92.           return keyShape;
    93.         },
    94.       });
    95.       //脱盐水站出水线
    96.       G6.registerEdge("line-desalination-arrow", {
    97.         draw(cfg, group) {
    98.           var startPoint = cfg.startPoint,
    99.             endPoint = cfg.endPoint;
    100.           var keyShape = group.addShape("path", {
    101.             attrs: {
    102.               path: [
    103.                 ["M", startPoint.x, startPoint.y],
    104.                 ["L", startPoint.x, startPoint.y - 40],
    105.                 ["L", endPoint.x, endPoint.y - 40],
    106.                 ["L", endPoint.x, endPoint.y],
    107.               ],
    108.               stroke: "#2BFF96",
    109.               lineWidth: 1,
    110.               startArrow: false,
    111.               endArrow: true,
    112.               className: "edge-shape",
    113.             },
    114.           });
    115.           return keyShape;
    116.         },
    117.       });
    118.  
    119.       //污水站出水线
    120.       G6.registerEdge("line-sewage-arrow", {
    121.         draw(cfg, group) {
    122.           var startPoint = cfg.startPoint,
    123.             endPoint = cfg.endPoint;
    124.           var keyShape = group.addShape("path", {
    125.             attrs: {
    126.               path: [
    127.                 ["M", startPoint.x, startPoint.y],
    128.                 ["L", startPoint.x, startPoint.y - 80],
    129.                 ["L", endPoint.x, endPoint.y - 80],
    130.                 ["L", endPoint.x, endPoint.y],
    131.               ],
    132.               stroke: "#8a63f5",
    133.               lineWidth: 1,
    134.               startArrow: false,
    135.               endArrow: true,
    136.               className: "edge-shape",
    137.             },
    138.           });
    139.           return keyShape;
    140.         },
    141.       });
    142.       //污水站进水线
    143.       G6.registerEdge("line-sewage-in-arrow", {
    144.         draw(cfg, group) {
    145.           var startPoint = cfg.startPoint,
    146.             endPoint = cfg.endPoint;
    147.           var keyShape = group.addShape("path", {
    148.             attrs: {
    149.               path: [
    150.                 ["M", startPoint.x, startPoint.y],
    151.                 ["L", startPoint.x, startPoint.y + 80],
    152.                 ["L", endPoint.x, endPoint.y + 80],
    153.                 ["L", endPoint.x, endPoint.y],
    154.               ],
    155.               stroke: "#f37907",
    156.               lineWidth: 1,
    157.               startArrow: false,
    158.               endArrow: true,
    159.               className: "edge-shape",
    160.             },
    161.           });
    162.           return keyShape;
    163.         },
    164.       });
    165.       //消耗水线
    166.       G6.registerEdge("line-consume-arrow", {
    167.         draw(cfg, group) {
    168.           var startPoint = cfg.startPoint,
    169.             endPoint = cfg.endPoint;
    170.           var keyShape = group.addShape("path", {
    171.             attrs: {
    172.               path: [
    173.                 ["M", startPoint.x, startPoint.y],
    174.                 ["L", startPoint.x, startPoint.y + 40],
    175.                 ["L", endPoint.x, endPoint.y],
    176.               ],
    177.               stroke: "#f30474",
    178.               lineWidth: 1,
    179.               startArrow: false,
    180.               endArrow: true,
    181.               className: "edge-shape",
    182.             },
    183.           });
    184.           return keyShape;
    185.         },
    186.       });
    187.       //外排污水水线
    188.       G6.registerEdge("line-sewageConsume-arrow", {
    189.         draw(cfg, group) {
    190.           var startPoint = cfg.startPoint,
    191.             endPoint = cfg.endPoint;
    192.           var keyShape = group.addShape("path", {
    193.             attrs: {
    194.               path: [
    195.                 ["M", startPoint.x, startPoint.y],
    196.                 ["L", startPoint.x, startPoint.y + 80],
    197.                 ["L", endPoint.x, endPoint.y],
    198.               ],
    199.               stroke: "#f36f04",
    200.               lineWidth: 1,
    201.               startArrow: false,
    202.               endArrow: true,
    203.               className: "edge-shape",
    204.             },
    205.           });
    206.           return keyShape;
    207.         },
    208.       });
    209.  
    210.       G6.registerNode(
    211.         "rectNode",
    212.         {
    213.           drawShape(cfg, group) {
    214.             var keyShape = group.addShape("rect", {
    215.               attrs: {
    216.                 width: 35,
    217.                 height: 250,
    218.                 x: 0,
    219.                 y: 0,
    220.                 radius: 4,
    221.                 lineWidth: 1,
    222.                 stroke: "#409eff",
    223.                 fill: "#0158CF",
    224.               },
    225.             });
    226.             group.addShape("text", {
    227.               attrs: {
    228.                 y: cfg.top || 160,
    229.                 x: 12,
    230.                 text: cfg.text,
    231.                 fill: "#fff",
    232.                 lineHeight: 20,
    233.               },
    234.             });
    235.  
    236.             return keyShape;
    237.           },
    238.         },
    239.         "rect"
    240.       );
    241.       G6.registerNode(
    242.         "textNode",
    243.         {
    244.           drawShape(cfg, group) {
    245.             var keyShape = group.addShape("rect", {
    246.               attrs: {
    247.                 width: 50,
    248.                 height: 30,
    249.                 x: 0,
    250.                 y: 0,
    251.                 radius: 4,
    252.                 lineWidth: 1,
    253.                 stroke: "transparent",
    254.                 fill: "transparent",
    255.               },
    256.             });
    257.             group.addShape("text", {
    258.               attrs: {
    259.                 y: cfg.textY || 25,
    260.                 x: cfg.textX || 15,
    261.                 text: cfg.text,
    262.                 fill: cfg.color || "#03b329",
    263.                 lineHeight: 20,
    264.               },
    265.             });
    266.  
    267.             return keyShape;
    268.           },
    269.         },
    270.         "rect"
    271.       );
    272.       let data = {
    273.         nodes: [
    274.           {
    275.             id: "productionWater",
    276.             x: (3 / 4) * spacing,
    277.             y: 80,
    278.             type: "textNode",
    279.             text: "生产水",
    280.             anchorPoints: [[0, 1]],
    281.           },
    282.           {
    283.             id: "1",
    284.             x: (1 / 2) * spacing,
    285.             y: 150,
    286.             type: "rectNode",
    287.             text: "水\n循\n环\n系\n统",
    288.             anchorPoints: anchorPoints,
    289.           },
    290.           {
    291.             id: "2",
    292.             x: 2 * spacing,
    293.             y: 150,
    294.             text: "脱\n盐\n水\n站",
    295.             type: "rectNode",
    296.             anchorPoints: anchorPoints,
    297.           },
    298.           {
    299.             id: "3",
    300.             x: 3 * spacing,
    301.             y: 150,
    302.             text: "冷\n凝\n鼓\n风",
    303.             type: "rectNode",
    304.             anchorPoints: anchorPoints,
    305.           },
    306.           {
    307.             id: "4",
    308.             x: 4 * spacing,
    309.             y: 150,
    310.             text: "脱\n硫\n单\n元",
    311.             type: "rectNode",
    312.             anchorPoints: anchorPoints,
    313.           },
    314.           {
    315.             id: "5",
    316.             x: 5 * spacing,
    317.             y: 150,
    318.             text: "硫\n铵\n单\n元",
    319.             type: "rectNode",
    320.             anchorPoints: anchorPoints,
    321.           },
    322.           {
    323.             id: "6",
    324.             x: 6 * spacing,
    325.             y: 150,
    326.             text: "粗\n苯\n蒸\n馏\n单\n元",
    327.             type: "rectNode",
    328.             anchorPoints: anchorPoints,
    329.           },
    330.           {
    331.             id: "7",
    332.             x: 7 * spacing,
    333.             y: 150,
    334.             text: "终\n冷\n洗\n苯\n单\n元",
    335.             type: "rectNode",
    336.             anchorPoints: anchorPoints,
    337.           },
    338.           {
    339.             id: "8",
    340.             x: 8 * spacing,
    341.             y: 150,
    342.             text: "制\n酸\n单\n元",
    343.             type: "rectNode",
    344.             anchorPoints: anchorPoints,
    345.           },
    346.           {
    347.             id: "9",
    348.             x: 9 * spacing,
    349.             y: 150,
    350.             text: "蒸\n氨\n单\n元",
    351.             type: "rectNode",
    352.             anchorPoints: anchorPoints,
    353.           },
    354.           {
    355.             id: "10",
    356.             x: 10 * spacing,
    357.             y: 150,
    358.             text: "油\n库\n单\n元",
    359.             type: "rectNode",
    360.             anchorPoints: anchorPoints,
    361.           },
    362.           {
    363.             id: "11",
    364.             x: 11 * spacing,
    365.             y: 150,
    366.             text: "汽\n化\n单\n元",
    367.             type: "rectNode",
    368.             anchorPoints: anchorPoints,
    369.           },
    370.           {
    371.             id: "12",
    372.             x: 12 * spacing,
    373.             y: 150,
    374.             text: "备\n煤\n系\n统\n焦\n处\n理\n系\n统",
    375.             top: 200,
    376.             type: "rectNode",
    377.             anchorPoints: anchorPoints,
    378.           },
    379.           {
    380.             id: "13",
    381.             x: 13 * spacing,
    382.             y: 150,
    383.             text: "炼\n焦\n设\n施",
    384.             type: "rectNode",
    385.             anchorPoints: anchorPoints,
    386.           },
    387.           {
    388.             id: "14",
    389.             x: 14 * spacing,
    390.             y: 150,
    391.             text: "除\n尘\n设\n施",
    392.             type: "rectNode",
    393.             anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
    394.           },
    395.           {
    396.             id: "15",
    397.             x: 15 * spacing,
    398.             y: 150,
    399.             text: "热\n力\n设\n施",
    400.             type: "rectNode",
    401.             anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
    402.           },
    403.           {
    404.             id: "16",
    405.             x: 16 * spacing,
    406.             y: 150,
    407.             text: "干\n熄\n焦\n系\n统",
    408.             type: "rectNode",
    409.             anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
    410.           },
    411.           {
    412.             id: "17",
    413.             x: 17 * spacing,
    414.             y: 150,
    415.             text: "汽\n轮\n发\n电\n站",
    416.             type: "rectNode",
    417.             anchorPoints: [...anchorPoints, [0.8, 0], [0.8, 1]],
    418.           },
    419.           {
    420.             id: "18",
    421.             x: 18.5 * spacing,
    422.             y: 150,
    423.             text: "污\n水\n处\n理\n站",
    424.             type: "rectNode",
    425.             anchorPoints: [
    426.               [0.5, 0],
    427.               [0.4, 1],
    428.               [0.6, 1],
    429.             ],
    430.           },
    431.           {
    432.             id: "consumeWater",
    433.             x: 19.5 * spacing,
    434.             y: 410,
    435.             type: "textNode",
    436.             text: "耗水",
    437.             textX: -45,
    438.             color: "#f30474",
    439.             anchorPoints: [[0, 1]],
    440.           },
    441.           {
    442.             id: "sewageConsumeWater",
    443.             x: 19.5 * spacing,
    444.             y: 450,
    445.             type: "textNode",
    446.             text: "外排废水",
    447.             textX: -45,
    448.             textY: 20,
    449.             color: "#f36f04",
    450.             anchorPoints: [[0, 1]],
    451.           },
    452.         ],
    453.         edges: [
    454.           {
    455.             source: "productionWater",
    456.             target: "2",
    457.             type: "line-production-arrow",
    458.             sourceAnchor: 0,
    459.             targetAnchor: 0,
    460.           },
    461.           {
    462.             source: "1",
    463.             target: "3",
    464.             type: "line-circulate-arrow",
    465.             sourceAnchor: 0,
    466.             targetAnchor: 0,
    467.           },
    468.           {
    469.             source: "1",
    470.             target: "4",
    471.             type: "line-circulate-arrow",
    472.             sourceAnchor: 0,
    473.             targetAnchor: 0,
    474.           },
    475.           {
    476.             source: "1",
    477.             target: "5",
    478.             type: "line-circulate-arrow",
    479.             sourceAnchor: 0,
    480.             targetAnchor: 0,
    481.           },
    482.           {
    483.             source: "1",
    484.             target: "6",
    485.             type: "line-circulate-arrow",
    486.             sourceAnchor: 0,
    487.             targetAnchor: 0,
    488.           },
    489.           {
    490.             source: "1",
    491.             target: "7",
    492.             type: "line-circulate-arrow",
    493.             sourceAnchor: 0,
    494.             targetAnchor: 0,
    495.           },
    496.           {
    497.             source: "1",
    498.             target: "8",
    499.             type: "line-circulate-arrow",
    500.             sourceAnchor: 0,
    501.             targetAnchor: 0,
    502.           },
    503.           {
    504.             source: "1",
    505.             target: "9",
    506.             type: "line-circulate-arrow",
    507.             sourceAnchor: 0,
    508.             targetAnchor: 0,
    509.           },
    510.           {
    511.             source: "1",
    512.             target: "10",
    513.             type: "line-circulate-arrow",
    514.             sourceAnchor: 0,
    515.             targetAnchor: 0,
    516.           },
    517.           {
    518.             source: "1",
    519.             target: "11",
    520.             type: "line-circulate-arrow",
    521.             sourceAnchor: 0,
    522.             targetAnchor: 0,
    523.           },
    524.           {
    525.             source: "1",
    526.             target: "12",
    527.             type: "line-circulate-arrow",
    528.             sourceAnchor: 0,
    529.             targetAnchor: 0,
    530.           },
    531.           {
    532.             source: "1",
    533.             target: "13",
    534.             type: "line-circulate-arrow",
    535.             sourceAnchor: 0,
    536.             targetAnchor: 0,
    537.           },
    538.           {
    539.             source: "1",
    540.             target: "14",
    541.             type: "line-circulate-arrow",
    542.             sourceAnchor: 0,
    543.             targetAnchor: 0,
    544.           },
    545.           {
    546.             source: "1",
    547.             target: "15",
    548.             type: "line-circulate-arrow",
    549.             sourceAnchor: 0,
    550.             targetAnchor: 0,
    551.           },
    552.           {
    553.             source: "1",
    554.             target: "16",
    555.             type: "line-circulate-arrow",
    556.             sourceAnchor: 0,
    557.             targetAnchor: 0,
    558.           },
    559.           {
    560.             source: "1",
    561.             target: "17",
    562.             type: "line-circulate-arrow",
    563.             sourceAnchor: 0,
    564.             targetAnchor: 0,
    565.           },
    566.           {
    567.             source: "17",
    568.             target: "1",
    569.             type: "line-circulate-in-arrow",
    570.             sourceAnchor: 2,
    571.             targetAnchor: 2,
    572.           },
    573.           {
    574.             source: "17",
    575.             target: "1",
    576.             type: "line-circulate-in-arrow",
    577.             sourceAnchor: 2,
    578.             targetAnchor: 2,
    579.           },
    580.           {
    581.             source: "16",
    582.             target: "1",
    583.             type: "line-circulate-in-arrow",
    584.             sourceAnchor: 2,
    585.             targetAnchor: 2,
    586.           },
    587.           {
    588.             source: "15",
    589.             target: "1",
    590.             type: "line-circulate-in-arrow",
    591.             sourceAnchor: 2,
    592.             targetAnchor: 2,
    593.           },
    594.           {
    595.             source: "14",
    596.             target: "1",
    597.             type: "line-circulate-in-arrow",
    598.             sourceAnchor: 2,
    599.             targetAnchor: 2,
    600.           },
    601.           {
    602.             source: "13",
    603.             target: "1",
    604.             type: "line-circulate-in-arrow",
    605.             sourceAnchor: 2,
    606.             targetAnchor: 2,
    607.           },
    608.           {
    609.             source: "12",
    610.             target: "1",
    611.             type: "line-circulate-in-arrow",
    612.             sourceAnchor: 2,
    613.             targetAnchor: 2,
    614.           },
    615.           {
    616.             source: "11",
    617.             target: "1",
    618.             type: "line-circulate-in-arrow",
    619.             sourceAnchor: 2,
    620.             targetAnchor: 2,
    621.           },
    622.           {
    623.             source: "10",
    624.             target: "1",
    625.             type: "line-circulate-in-arrow",
    626.             sourceAnchor: 2,
    627.             targetAnchor: 2,
    628.           },
    629.           {
    630.             source: "9",
    631.             target: "1",
    632.             type: "line-circulate-in-arrow",
    633.             sourceAnchor: 2,
    634.             targetAnchor: 2,
    635.           },
    636.           {
    637.             source: "8",
    638.             target: "1",
    639.             type: "line-circulate-in-arrow",
    640.             sourceAnchor: 2,
    641.             targetAnchor: 2,
    642.           },
    643.           {
    644.             source: "7",
    645.             target: "1",
    646.             type: "line-circulate-in-arrow",
    647.             sourceAnchor: 2,
    648.             targetAnchor: 2,
    649.           },
    650.           {
    651.             source: "6",
    652.             target: "1",
    653.             type: "line-circulate-in-arrow",
    654.             sourceAnchor: 2,
    655.             targetAnchor: 2,
    656.           },
    657.           {
    658.             source: "5",
    659.             target: "1",
    660.             type: "line-circulate-in-arrow",
    661.             sourceAnchor: 2,
    662.             targetAnchor: 2,
    663.           },
    664.           {
    665.             source: "4",
    666.             target: "1",
    667.             type: "line-circulate-in-arrow",
    668.             sourceAnchor: 2,
    669.             targetAnchor: 2,
    670.           },
    671.           {
    672.             source: "3",
    673.             target: "1",
    674.             type: "line-circulate-in-arrow",
    675.             sourceAnchor: 2,
    676.             targetAnchor: 2,
    677.           },
    678.           {
    679.             source: "2",
    680.             target: "3",
    681.             type: "line-desalination-arrow",
    682.             sourceAnchor: 1,
    683.             targetAnchor: 1,
    684.           },
    685.           {
    686.             source: "2",
    687.             target: "4",
    688.             type: "line-desalination-arrow",
    689.             sourceAnchor: 1,
    690.             targetAnchor: 1,
    691.           },
    692.           {
    693.             source: "2",
    694.             target: "5",
    695.             type: "line-desalination-arrow",
    696.             sourceAnchor: 1,
    697.             targetAnchor: 1,
    698.           },
    699.           {
    700.             source: "2",
    701.             target: "6",
    702.             type: "line-desalination-arrow",
    703.             sourceAnchor: 1,
    704.             targetAnchor: 1,
    705.           },
    706.           {
    707.             source: "2",
    708.             target: "7",
    709.             type: "line-desalination-arrow",
    710.             sourceAnchor: 1,
    711.             targetAnchor: 1,
    712.           },
    713.           {
    714.             source: "2",
    715.             target: "8",
    716.             type: "line-desalination-arrow",
    717.             sourceAnchor: 1,
    718.             targetAnchor: 1,
    719.           },
    720.           {
    721.             source: "2",
    722.             target: "9",
    723.             type: "line-desalination-arrow",
    724.             sourceAnchor: 1,
    725.             targetAnchor: 1,
    726.           },
    727.           {
    728.             source: "2",
    729.             target: "10",
    730.             type: "line-desalination-arrow",
    731.             sourceAnchor: 1,
    732.             targetAnchor: 1,
    733.           },
    734.           {
    735.             source: "2",
    736.             target: "11",
    737.             type: "line-desalination-arrow",
    738.             sourceAnchor: 1,
    739.             targetAnchor: 1,
    740.           },
    741.           {
    742.             source: "2",
    743.             target: "12",
    744.             type: "line-desalination-arrow",
    745.             sourceAnchor: 1,
    746.             targetAnchor: 1,
    747.           },
    748.           {
    749.             source: "2",
    750.             target: "13",
    751.             type: "line-desalination-arrow",
    752.             sourceAnchor: 1,
    753.             targetAnchor: 1,
    754.           },
    755.           {
    756.             source: "2",
    757.             target: "14",
    758.             type: "line-desalination-arrow",
    759.             sourceAnchor: 1,
    760.             targetAnchor: 1,
    761.           },
    762.           {
    763.             source: "2",
    764.             target: "15",
    765.             type: "line-desalination-arrow",
    766.             sourceAnchor: 1,
    767.             targetAnchor: 1,
    768.           },
    769.           {
    770.             source: "2",
    771.             target: "16",
    772.             type: "line-desalination-arrow",
    773.             sourceAnchor: 1,
    774.             targetAnchor: 1,
    775.           },
    776.           {
    777.             source: "2",
    778.             target: "17",
    779.             type: "line-desalination-arrow",
    780.             sourceAnchor: 1,
    781.             targetAnchor: 1,
    782.           },
    783.           {
    784.             source: "18",
    785.             target: "17",
    786.             type: "line-sewage-arrow",
    787.             sourceAnchor: 0,
    788.             targetAnchor: 4,
    789.           },
    790.           {
    791.             source: "18",
    792.             target: "16",
    793.             type: "line-sewage-arrow",
    794.             sourceAnchor: 0,
    795.             targetAnchor: 4,
    796.           },
    797.           {
    798.             source: "18",
    799.             target: "15",
    800.             type: "line-sewage-arrow",
    801.             sourceAnchor: 0,
    802.             targetAnchor: 4,
    803.           },
    804.           {
    805.             source: "18",
    806.             target: "14",
    807.             type: "line-sewage-arrow",
    808.             sourceAnchor: 0,
    809.             targetAnchor: 4,
    810.           },
    811.           {
    812.             source: "2",
    813.             target: "18",
    814.             type: "line-sewage-in-arrow",
    815.             sourceAnchor: 3,
    816.             targetAnchor: 1,
    817.           },
    818.           {
    819.             source: "17",
    820.             target: "18",
    821.             type: "line-sewage-in-arrow",
    822.             sourceAnchor: 5,
    823.             targetAnchor: 1,
    824.           },
    825.           {
    826.             source: "16",
    827.             target: "18",
    828.             type: "line-sewage-in-arrow",
    829.             sourceAnchor: 5,
    830.             targetAnchor: 1,
    831.           },
    832.           {
    833.             source: "15",
    834.             target: "18",
    835.             type: "line-sewage-in-arrow",
    836.             sourceAnchor: 5,
    837.             targetAnchor: 1,
    838.           },
    839.           {
    840.             source: "14",
    841.             target: "18",
    842.             type: "line-sewage-in-arrow",
    843.             sourceAnchor: 5,
    844.             targetAnchor: 1,
    845.           },
    846.           {
    847.             source: "1",
    848.             target: "consumeWater",
    849.             type: "line-consume-arrow",
    850.             sourceAnchor: 3,
    851.             targetAnchor: 0,
    852.           },
    853.           {
    854.             source: "3",
    855.             target: "consumeWater",
    856.             type: "line-consume-arrow",
    857.             sourceAnchor: 3,
    858.             targetAnchor: 0,
    859.           },
    860.           {
    861.             source: "4",
    862.             target: "consumeWater",
    863.             type: "line-consume-arrow",
    864.             sourceAnchor: 3,
    865.             targetAnchor: 0,
    866.           },
    867.           {
    868.             source: "5",
    869.             target: "consumeWater",
    870.             type: "line-consume-arrow",
    871.             sourceAnchor: 3,
    872.             targetAnchor: 0,
    873.           },
    874.           {
    875.             source: "6",
    876.             target: "consumeWater",
    877.             type: "line-consume-arrow",
    878.             sourceAnchor: 3,
    879.             targetAnchor: 0,
    880.           },
    881.           {
    882.             source: "7",
    883.             target: "consumeWater",
    884.             type: "line-consume-arrow",
    885.             sourceAnchor: 3,
    886.             targetAnchor: 0,
    887.           },
    888.           {
    889.             source: "8",
    890.             target: "consumeWater",
    891.             type: "line-consume-arrow",
    892.             sourceAnchor: 3,
    893.             targetAnchor: 0,
    894.           },
    895.           {
    896.             source: "9",
    897.             target: "consumeWater",
    898.             type: "line-consume-arrow",
    899.             sourceAnchor: 3,
    900.             targetAnchor: 0,
    901.           },
    902.           {
    903.             source: "10",
    904.             target: "consumeWater",
    905.             type: "line-consume-arrow",
    906.             sourceAnchor: 3,
    907.             targetAnchor: 0,
    908.           },
    909.           {
    910.             source: "11",
    911.             target: "consumeWater",
    912.             type: "line-consume-arrow",
    913.             sourceAnchor: 3,
    914.             targetAnchor: 0,
    915.           },
    916.           {
    917.             source: "12",
    918.             target: "consumeWater",
    919.             type: "line-consume-arrow",
    920.             sourceAnchor: 3,
    921.             targetAnchor: 0,
    922.           },
    923.           {
    924.             source: "13",
    925.             target: "consumeWater",
    926.             type: "line-consume-arrow",
    927.             sourceAnchor: 3,
    928.             targetAnchor: 0,
    929.           },
    930.           {
    931.             source: "14",
    932.             target: "consumeWater",
    933.             type: "line-consume-arrow",
    934.             sourceAnchor: 3,
    935.             targetAnchor: 0,
    936.           },
    937.           {
    938.             source: "15",
    939.             target: "consumeWater",
    940.             type: "line-consume-arrow",
    941.             sourceAnchor: 3,
    942.             targetAnchor: 0,
    943.           },
    944.           {
    945.             source: "16",
    946.             target: "consumeWater",
    947.             type: "line-consume-arrow",
    948.             sourceAnchor: 3,
    949.             targetAnchor: 0,
    950.           },
    951.           {
    952.             source: "17",
    953.             target: "consumeWater",
    954.             type: "line-consume-arrow",
    955.             sourceAnchor: 3,
    956.             targetAnchor: 0,
    957.           },
    958.            {
    959.             source: "18",
    960.             target: "sewageConsumeWater",
    961.             type: "line-sewageConsume-arrow",
    962.             sourceAnchor: 2,
    963.             targetAnchor: 0,
    964.           },
    965.         ],
    966.       };
    967.  
    968.       this.graph = new G6.Graph({
    969.         container: "mountNode",
    970.         width: width,
    971.         height: 620,
    972.       });
    973.       this.graph.data(data);
    974.       this.graph.render();
    975.     },
    976.   },
    977. };
    978. script>
    979. <style lang="scss" scoped>
    980. .drawflow {
    981.   height: 100%;
    982.   width: 100%;
    983.   #mountNode {
    984.     width: 100%;
    985.     height: 100%;
    986.   }
    987. }
    988. style>

     

  • 相关阅读:
    详解 ClickHouse 的语法优化规则
    Nvm管理NodeJs版本
    【LeetCode】1282. 用户分组
    化妆品展示网页设计作业 静态HTML化妆品网站 DW美妆网站模板下载 大学生简单网页作品代码 个人网页制作 学生个人网页设计作业
    计算机毕业设计Java自动化办公系统(源码+系统+mysql数据库+lw文档）
    数据库与缓存数据一致性解决方案
    preview_220624,Day08_DM层建设实战,
    VO、DTO
    2022年mvnrepository跳过人机验证
    Flow-vue源码中的应用
  • 原文地址：https://blog.csdn.net/killerdoubie/article/details/134060901