push

lib/component/flowChart/flow-chart.vue

@@ -0,0 +1,71 @@
+<template><div id="container"></div> </template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Graph } from '@antv/x6';
+
+  export default defineComponent({
+    name: 'NsFlowChart',
+    setup() {},
+    mounted() {
+      const data = {
+        // 节点
+        nodes: [
+          {
+            id: 'node1', // String，可选，节点的唯一标识
+            x: 40, // Number，必选，节点位置的 x 值
+            y: 40, // Number，必选，节点位置的 y 值
+            width: 80, // Number，可选，节点大小的 width 值
+            height: 40, // Number，可选，节点大小的 height 值
+            label: 'hello', // String，节点标签
+            line: {
+              stroke: 'orange',
+            },
+          },
+          {
+            id: 'node2', // String，节点的唯一标识
+            x: 160, // Number，必选，节点位置的 x 值
+            y: 180, // Number，必选，节点位置的 y 值
+            width: 80, // Number，可选，节点大小的 width 值
+            height: 40, // Number，可选，节点大小的 height 值
+            label: 'world', // String，节点标签
+          },
+        ],
+        // 边
+        edges: [
+          {
+            source: 'node1', // String，必须，起始节点 id
+            target: 'node2', // String，必须，目标节点 id
+          },
+        ],
+      };
+      const graph = new Graph({
+        container: document.getElementById('container') as HTMLElement,
+
+        background: {
+          color: '#191F27', // 设置画布背景颜色
+        },
+        grid: {
+          size: 10, // 网格大小 10px
+          type: 'dot',
+          visible: false, // 渲染网格背景
+          args: {
+            color: '#fff', // 网格线/点颜色
+            thickness: 0.5, // 网格线宽度/网格点大小
+          },
+        },
+        snapline: {
+          enabled: true,
+          className: 'my-snapline',
+        },
+      });
+
+      graph.fromJSON(data);
+    },
+  });
+</script>
+<style lang="less" scoped>
+  #container {
+    width: 1000px;
+    height: 100%;
+  }
+</style>