vue使用g6做流程图

一、安装使用

下载安装：

npm install @antv/g6 --save

导入使用：

import G6 from '@antv/g6';

二、初始化画布

1. 建立一个div

<div id="mountNode" style="margin-top: 20px;"></div>

 2. js生成画布

渲染数据格式“：

// 数据结构分为节点数组nodes和边对应关系数组edges
const data = {
  // 节点数组
  nodes: [
    {
      id: 'node1',
      x: 100,
      y: 200,
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
    },
  ],
  // 边对应关系数组
  edges: [
    // 从 node1 节点连接到 node2 节点的边线
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

实例化画布：

 1  methods: {
 2       initG6() {
 3         const nodes = this.data.nodes
 5         // 创建 G6 图实例
 6         this.graph = new G6.Graph({
 7           container: 'mountNode',  // 画布容器id
 8           width: 1200,  // 画布宽度
 9           height: 3200,    // 画布高度
10           modes: {
11             default: ['drag-canvas','click-select']
12           },
13           layout: {
14             type: 'dagre',
15             rankdir: 'LR',
16             align: 'UL',
17             nodesep:15,
18             controlPoints: true,
19           },
20         //默认节点样式设置
21           defaultNode: {  
22               size: [100, 30],
23               type: 'rect',
24               color:"#ffffff",
25               style: {
26                 lineWidth: 2,
27                 stroke: '#5B8FF9',
28                 fill: '#C6E5FF',
29                 radius:5
30               },
31               labelCfg: {
32                 style: {
33                   fontSize: 12,
34                 },
35               },
36           },
37            // 默认的边样式设置
38           defaultEdge: { 
39             type: 'polyline',
40             size: 1,
41             color: '#c8c8c8',
42             style: {
43               endArrow: {
44                 path: 'M 0,0 L 8,4 L 8,-4 Z',
45                 fill: '#c8c8c8',
46               },
47               radius: 5,
48             },
49           },
50         })
51         this.graph.data(this.data)  // 读取数据
52         this.graph.render()  // 渲染数据
53         this.graph.on('click', (ev)=>{  // 监听节点点击事件
54           this.evt = ev.item
55           const shape = ev.target;
56           if(ev.item){
57             const item = ev.item;
58             const type = item.getType();
59             // console.log('点击节点shape,item,type',shape,item,type)
60             this.selectedItem = ev.item._cfg.model
61             console.log('treecomplex click 当前节点信息',this.selectedItem)
62           }65         });
66         if (typeof window !== 'undefined')
67           window.onresize = () => {
68             if (!this.graph || this.graph.get('destroyed')) return;
69             if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight) return;
70             this.graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);
71           };
72       },
73 }

 三、G6官方文档

文档链接：https://g6.antv.vision/zh/docs/manual/introduction

posted @ 2021-08-09 14:01  这里有个博客  阅读(3612)  评论(0)  编辑  收藏  举报