流程图 自定义函数_家人们 基于AntV G6画流程图了解一下
前言：
双节假期已进尾声，今天和大家分享一下，近期，重点实操的蚂蚁开源的图可视化引擎——AntV G6(https://g6.antv.vision/zh)。
G6能干嘛呢？画关系图！拓扑图、思维导图、流程图等等，功能很强大，但是官方的文档实在不忍吐槽(近期稍微好了那么一点点)，想要实现自己的功能，需要你对它深入的理解，处处需要自定义，入门还是有那么点困难滴。
那么废话不多说，干货分享。
G6 周边:
g6-editor
其实之前蚂蚁开源过基于G6的g6-editor，就是给你封装好，开箱即用的，但是后来这个项目黄了，官方的解释如下：
但是鄙人感觉最近几年，很多公司的业务都会涉及图可视化编辑器的需求，价值太大了吧，所以是不是也有这么一层的原因在里面。反正不管了，因为g6-editor确实存在一些BUG，你要再用的话，但凡遇到一些问题，还是很麻烦的，所以不建议大家为图方便给自己挖坑。
如果实在想用的话，可以参考下面这个开源项目：
https://github.com/zhangwenwu/vue-element-admin-g6-editor
PAI
此外，不知道大家对阿里的机器学习PAI有没有了解，感觉上，PAI的可视化建模的前端就是基于G6去做的，或者说阿里内部版本的G6吧，可以参考一下(https://www.aliyun.com/product/bigdata/product/learn)。如下：
其它开源
vue-g6-editor https://github.com/caoyu48/vue-g6-editor
补充：1.这篇文章有对这个项目进行补充 https://www.cnblogs.com/wlovet/p/12660214.html2.这个项目的菜单功能在Mac系统上不兼容。welabx-g6 https://github.com/claudewowo/welabx-g6
X-Flowchart-Vue https://github.com/OXOYO/X-Flowchart-Vue
AntVG6 开发示例
安装
npm install --save @antv/g6
创建 div 图表容器
id="example" >
分享部分初始化的方法
init() { this.documentHeight = document.documentElement.clientHeight; const height = this.documentHeight - 140; this.documentWidth = document.getElementById("designG6").offsetWidth * 17/24; const width = this.documentWidth; const _this = this; // 核心：封装点击添加边的交互 G6.registerBehavior("click-add-edge", { // 设定该自定义行为需要监听的事件及其响应函数 getEvents() { return { "node:mousedown": "onMousedown",//鼠标按钮在节点上按下(左键或者右键)时触发，不能通过键盘触发 mouseup: "onMouseup", //mouseup 鼠标按钮被释放弹起时触发 mousemove: "onMousemove", // 监听事件 mousemove，响应函数是 onMousemove 'canvas:click': 'onCanvasClick',//鼠标左键单击画布时触发 }; }, onMouseup(ev) {//鼠标按钮被释放弹起时触发，不能通过键盘触发 ev.stopPropagation(); //表示阻止向父元素冒泡 ev.preventDefault(); //阻止 方法阻止元素发生默认的行为(例如，当点击提交按钮时阻止对表单的提交或者a标签。 const type = ev.shape ? ev.shape.attrs.cursor : null;// 鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持 if (type === "crosshair" ) { .... } else { if (this.addingEdge && this.edge) { this.graph.removeItem(this.edge); this.edge = null; this.addingEdge = false; } } }, onMousedown(ev) { const type = ev.shape ? ev.shape.attrs.cursor : null; ..... }, // getEvents 中定义的 mousemove 的响应函数 onMousemove(ev) { // 鼠标的当前位置 const point = { x: ev.x, y: ev.y }; ...... }, onCanvasClick(){ this.graph.findAll("edge", item => { this.graph.updateItem(item, { style: { lineWidth: 2, opacity: 1 } }); }); } }); const dashArray = [ [0, 1], [0, 2], [1, 2], [0, 1, 1, 2], [0, 2, 1, 2], [1, 2, 1, 2], [2, 2, 1, 2], [3, 2, 1, 2], [4, 2, 1, 2] ]; const lineDash = [4, 2, 1, 2]; const interval = 9; // lineDash 的和 const minimap = new G6.Minimap({ container: this.minMapName, size: [150, 100], }); this.graph = this.graphs[this.activeWindow] = new G6.Graph({ container: this.containerName, height: height, width: width, fitView: true, fitViewPadding: 0, minZoom: 0.5, maxZoom: 2, // 设置为true，启用 redo & undo 栈功能 enabledStack: true, defaultNode: { type: "modelRect", shape: "customNode", size: [200, 40], labelCfg: {//通过 labelCfg 配置标签文本 style: {} }, style: { fill: "#fff", radius: 4, cursor: "move" }, preRect: {//通过 preRect 可以配置左侧的小矩形形状。 show: true, width: 4 }, logoIcon: {//通过 logoIcon 和 stateIcon 可以配置左侧的 logo 小图标和右边的状态小图标，这两个的配置项完全相同。 show: true, img: databasePng, width: 20, height: 24, offset: 0 }, stateIcon: { show: true, img: uploadPng }, }, defaultEdge: { type: "cubic-vertical",//垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点 style: { endArrow: { path: "M 0,0 L 8,4 L 8,-4 Z", fill: "#F6BD16" }, lineWidth: 2, lineAppendWidth: 5, cursor: "pointer", stroke: "#F6BD16" }, labelCfg: { autoRotate: true }, }, nodeStateStyles: { selected: { fill: "steelblue", fillOpacity: 0.1 }, hover: {} }, plugins: [ minimap], // 配置 Minimap 插件 modes: { default: [ "drag-node", "drag-canvas", "zoom-canvas", "click-select", "click-add-edge", ] } }); let data = this.data; if (data) { this.graph.read(data); } this.graph.on("node:contextmenu", evt => { ... }); this.graph.on("node:click", evt => { ... }); this.graph.on("keyup", evt => { ... });},效果：
Tips：
在我看来，AntvG6还处在一个生长期，GitHub上大家在不停的提出issues,官方每个月也都会发布一个新版本，所以，咱们在开发过程中，我建议大家时刻关注它的更新日志，及时的对项目中的版本进行更新，因为说不定困扰你很久的问题，其实是它的BUG呢？
G6 ChangeLog : https://github.com/antvis/G6/blob/master/CHANGELOG.md总结：
双节快乐
，欢迎关注，交流成长～
