@antv/x6 再vue中 ，自定义图形，画流程图、数据建模、er图等图形 ...

X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
最终效果图

1.安装

npm install @antv/x6 --save  //x6主要包

1. npm install  @antv/x6-vue-shape  //使用vue组件画图插件

复制代码

1. npm install @antv/x6-plugin-dnd //拖拽 添加元素图形插件

复制代码

2.直接上代码
dom元素 form.vue

1. <template>
3.     <!-- 新增、编辑弹窗-->
4.     <el-dialog width="1200px" class="flow-dialog" top="5vh" title="实体编辑" :visible.sync="show" :append-to-body="true" :close-on-click-modal = "false" v-el-drag-dialog>
5.       <div class="content">
6.         <!--左侧工具栏-->
7.         <div class="stencil" >
8.           <p>流程编辑器</p>
9.           <span @mousedown="startDragToGraph(item, $event)" v-for="item in list" :key="item" @click="test(item)" class="percentage-value">
10.             <i style="margin-right: 5px;cursor: pointer;"  class="el-icon-setting"/>
11.             <span class="percentage-content">{{ item }}</span>
12.           </span>
13.         </div>
14.         <div class="panel">
15.           <!--流程图工具栏-->
16.           <div class="toolbar">
17.             <el-button class="float-btn" icon="el-icon-s-claim" type="primary" @click="save()">保存</el-button>
18.             <el-button class="float-btn" icon="el-icon-s-home" type="danger" @click="show=false">退出</el-button>
19.             <el-button style="margin-left: 100px;" class="float-btn" icon="el-icon-s-tools" type="success" @click="">设置预览参数</el-button>
20.             <el-button class="float-btn" icon="el-icon-notebook-2" type="info" @click="">预览节点数据</el-button>
21.             <el-button class="float-btn" icon="el-icon-refresh" type="success" @click="">重算预览数据</el-button>
22.           </div>
23.           <!--流程图画板-->
24.           <div id="containerShape" />
25.         </div>
26.       </div>
27.     </el-dialog>
29. </template>

复制代码

js部门

1. <script>
2. import elDragDialog from '@/directive/el-drag-dialog'
3.   import { register } from '@antv/x6-vue-shape'
4.   import { Graph,Shape} from "@antv/x6";
5.   import CustomNode from './CustomNode.vue'
6.   import { Dnd } from '@antv/x6-plugin-dnd'
8.   export default {
9.     directives: { elDragDialog },
10.     data() {
11.       return {
12.         show:false,
13.         list: ['数据查询', '横向连接', '追加合并', '分组汇总', '数据过滤','字段设置','输出'],
14.         graph:{}
15.       }
16.     },
17.     mounted() {
18.       const attrs = {
19.         circle: {
20.           r: 4,
21.           magnet: true,
22.           fill: '#fff',
23.           stroke: '#85A5FF',
24.           strokeWidth: 1,
25.         },
26.       };
27.       register({
28.         shape: 'custom-vue-node',
29.         component: CustomNode,
30.         width: 180,
31.         height: 40,
32.         // port默认不可见
33.         ports: {
34.           groups: {
35.             in: {
36.               position: {
37.                 name:'left',
38.                 args: {
39.                   dx: -10,
40.                   y: '50%',
41.                 },
42.               },
43.               attrs: attrs
44.             },
45.             out: {
46.               position: {
47.                 name:'right',
48.                 args: {
49.                   x: '100%',
50.                   dx: 10,
51.                   y: '50%',
52.                 },
53.               },
54.               attrs: attrs
55.             },
56.           },
57.         },
58.       })
59.     },
60.     methods: {
61.       open() {
62.         this.show = true;
63.         this.$nextTick(() => {
64.           this.init("containerShape");
65.         });
66.       },
67.       init(id){
68.         const graph = new Graph({
69.           container: document.getElementById(id),
70.           width: 1000,
71.           height: 1000,
72.           connecting: {
73.             router: 'manhattan',
74.             anchor: 'center',
75.             connectionPoint: 'anchor',
76.             createEdge() {
77.               return new Shape.Edge({
78.                 attrs: {
79.                   line: {
80.                     stroke: '#52c41a',
81.                     strokeWidth: 1,
82.                     strokeDasharray: 5,
83.                     targetMarker: 'classic',
84.                     style: {
85.                       animation: 'ant-line 30s infinite linear',
86.                     },
87.                   },
88.                 },
89.                 zIndex: 0,
90.               })
91.             },
92.           }
93.         })
94.         graph.addNode({
95.           shape: 'custom-vue-node',
96.           x: 100,
97.           y: 100,
98.           ports: [{group: 'in'},{group: 'out'}],
99.           data:{
100.             percentage: 30
101.           }
102.         })
105.         this.graph = graph;
106.      },
107.       save() {
108.        this.graph.addNode({
109.          shape: 'custom-vue-node',
110.          x: 200,
111.          y: 300,
112.          ports: [{group: 'in'},{group: 'out'}],
113.          data:{
114.            percentage: '数据流程飒飒飒飒拉开阿斯兰的卡死了的科目来打开'
115.          }
116.        })
117.       },
118.       // 自定义一个拖拽方法，也可以单独封装成一个js文件(方便调用)
119.       // 这里直接写到vue文件的methods方法里了
120.       // 需求：未置灰的可以拖拽，置灰的无法拖拽即禁用状态
121.       startDragToGraph(item, e) {
122.           const node = this.graph.createNode({
123.             shape: 'custom-vue-node',
124.             x: 200,
125.             y: 300,
126.             ports: [{group: 'in'},{group: 'out'}],
127.             data:{
128.               percentage: item
129.             }
130.           });
131.           const dnd = new Dnd({
132.             target: this.graph,
133.             // ☆拖拽结束时，验证节点是否可以放置到目标画布中。
134.             validateNode: () => {
135.               console.log('成功拖拽至目标画布')
136.             },
137.           })
138.           dnd.start(node, e)
139.       },
141.     }
142.   }
143. </script>

复制代码

css部门

1. <style type="text/css">
2.   @keyframes ant-line {
3.     to {
4.     stroke-dashoffset: -1000
5.     }
6.   }
7. </style>
9. <style type="text/css" scoped>
10.   .flow-dialog ::v-deep .el-dialog__body{
11.     max-height: 85vh;
12.     padding: 0;
13.   }
14.   .toolbar ::v-deep .el-button--small{
15.     padding: 5px 10px;
16.   }
17.   .content {
18.     width: 1180px;
19.     height: 85vh;
20.     display: flex;
21.   }
23.   .stencil {
24.     width: 230px;
25.     height: 100%;
26.     position: relative;
27.     margin-right: 10px;
28.     border-right: 1px solid rgba(0, 0, 0, 0.08);
29.     box-sizing: border-box;
30.     text-align: center;
31.   }
32.   .stencil p{
33.      margin: 0;
34.      line-height: 37px;
35.      border-bottom: 1px solid #00000008;
36.      background-color: #f7f9fb;
37.      font-size: 14px;
38.      padding-left: 5px;
39.      text-align: left;
40.    }
41.   .panel {
42.     width: calc(100% - 230px);
43.     height: 100%;
44.   }
46.   .panel .toolbar {
47.     width: 100%;
48.     height: 38px;
49.     display: flex;
50.     align-items: center;
51.     background-color: #f7f9fb;
52.     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
53.   }
55.   .panel #containerShape {
56.     width: 100%;
57.     height: calc(100% - 10px) !important;
58.   }
60.   .percentage-value{
61.     display: inline-block;
62.     width: max-content;
63.     background-color: #fff;
64.     border: 1px solid #c2c8d5;
65.     border-left: 4px solid #5F95FF;
66.     border-radius: 4px;
67.     box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
68.     padding: 8px;
69.     font-size: 16px;
70.     margin-top: 10px;
71.     text-align: left;
72.   }
73.   .percentage-content{
74.     width: 100px;
75.     max-width: 150px;
76.     overflow: hidden;
77.     font-size: 12px;
78.     display: inline-block;
79.   }
81. </style>

复制代码

CustomNode.vue节点元素dom

1. <template>
2.   <span class="percentage-value">
3.     <i style="margin-right: 5px;cursor: pointer;" @click="save()" class="el-icon-setting"/>
4.     <span class="percentage-content">{{ percentage }}%</span>
5.     <i @click="save()" class="el-icon-success data-start"/>
6.   </span>
7. </template>
10. <script>
11.   export default {
12.     inject: ['getNode'],
13.     data() {
14.       return {
15.         percentage: 50,
16.       }
17.     },
18.     mounted() {
19.       const cell = this.getNode();
20.       this.percentage = cell.data.percentage;
21.     },
22.     methods: {
23.       save(){
24.         console.log("点击成功")
25.       }
26.     }
27.   }
28. </script>
29. <style type="text/css" scoped>
30. .percentage-value{
31.    display: inline-block;
32.    width: max-content;
33.    background-color: #fff;
34.    border: 1px solid #c2c8d5;
35.    border-left: 4px solid #5F95FF;
36.    border-radius: 4px;
37.    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
38.    padding: 10px;
39.    font-size: 16px;
40. }
41. .percentage-content{
42.    width: 100px;
43.    max-width: 150px;
44.    overflow: hidden;
45.    font-size: 12px;
46.    display: inline-block;
47. }
48.   .data-start{
49.     margin-right: 5px;
50.     margin-left: 10px;
51.     cursor: pointer;
52.     color: #6bcc00;
53.   }
54. </style>

复制代码

相干官方文档x6.antv官网

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。