Vue绘制业务流程图（附源码）
先给大家看一下效果图：
图中每个节点的字体颜色，边框颜色，连接线，图例说明等都是可以进行动态配置的.
项目源码在文章末尾。
目录
基本构成
数据格式
节点Nodes
shape可选参数：
animation可选参数：
边Edges
群组groups
图例guids
状态status
项目实战
前置条件
导入工具类
页面创建流程图容器
绘制图形
本项目中使用绘制流程图的G6Utils.min.js是基于G6进行封装的。
关于G6的使用大家可以自行进入官网查看：G6官网
那么我们开始实战：
基本构成
数据格式
首先我们先简单了解一下使用该工具类绘制流程的数据格式：
| 元素 |
说明 |
| Nodes |
节点 |
| Edges |
边 |
| Guides |
图例说明 |
| Groups |
群组 |
| Status | 状态说明 |
//基本构成
{
nodes:[],
edges:[],
groups: [],
guides: [],
status:[]
}节点Nodes
nodes:[
{
id: 'chuzhi', //节点ID，唯一
shape:'node', //节点形状
raduis:5, //半径范围 若shape:'root'则有该属性，不填默认为5px，可选参数
name:'处置', //节点内文章描述，可选参数
status:'timeout', //节点状态，对应status中的配置，可选参数
animation:'flicker', //节点动画，可选参数
parent:'group1', //节点所属群组，可选参数
x: 400, //节点X坐标
y: 500, //节点Y坐标
},
...
]shape可选参数：
- root 根节点
- node 处置节点
- 更多图形节点封装后续继续更新
animation可选参数：
- flicker 节点闪烁动画
- wave 节点背景波浪动画
注：
- status数组与基本构成中的status配置内容一样，详情可查看status说明；
- radius只在节点形状为root时有效，系统默认radius=5，属性效果同css样式中的border-raduis
- 注有可选参数则，该参数可选，其余为必选参数
边Edges
edges:[
{
id: 'edge1', //群组ID，唯一
source:'shenhe3', //边起始点节点ID
target: 'jianyi', //边结束点节点ID
label:'不通过', //边上描述，可选参数
controlPoints:[ //控制点（当边需要弯折时必须加入的参数，指边必须经过的点），可选参数
{
x:230,
y:150
},
{
x:130,
y:150
}
]
},
...
]群组groups
groups:[
{
id:'group4', //群组ID，唯一
shape:'lane', //取值形状
label: '泳道一', //群组名称
},
...
]图例guids
guides:[
{
id:'legend', //图例ID，唯一
shape:'legend', //图例形状
label:[{shape:'root',name:'开始/结束'},{shape:'node',name:'处置流程'}] //图例节点描述，对应nodes中所使用的节点
},
...
]注：
- 图例中label为数组，可配置需要展示的图例节点，及说明文字
状态status
status:[
{
title:'done', //状态标题，对应nodes中的status
color:'green', //颜色，对应node节点的字体，边框颜色
name:'已完成' //状态名称
},
...
]项目实战
前置条件
引入G6：
cnpm install @antv/g6 --save导入工具类
在vue页面中使用G6Utils
import {init,update} from './utils/g6Utils.min.js'; //导入路径可变注：
- init()：图形初始化函数
- update：动态改变图形函数
页面创建流程图容器
绘制图形