• 周一. 5月 27th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

vue使用g6做流程图

admin

11月 28, 2021

一、安装使用

下载安装:

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            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

无限的我,现在才开始绽放,从东边的第一缕阳光到西边的尽头

《vue使用g6做流程图》有2个想法
  1. Wow, wonderful weblog format! How long have you been running a blog for?
    you make blogging glance easy. The overall glance of your website
    is magnificent, let alone the content material! You can see similar here sklep online

  2. Hi there! Do you know if they make any plugins to help with SEO?
    I’m trying to get my website to rank for some
    targeted keywords but I’m not seeing very good gains.
    If you know of any please share. Cheers! I saw similar art here: Scrapebox AA List

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注