最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
GOJS+VUE实现流程图效果的教程
时间:2022-06-25 15:27:38 编辑:袖梨 来源:一聚教程网
前言及展示
在项目中需要根据传过来的数据画出流程图,采用了GOJS插件,功能很全面,可以根据自己的需要调整,不过建议简单的流程图还是自己手写一个组件,更加便于维护和变换。有一点需要注意的是,GOJS是需要收费的,有水印,虽然可以手动去掉,但是公司用的话还是需要买。GOJS的官网上有关于在VUE中应用GOJS的小例子:Minimal GoJS Sample in Vue.js。推荐看一下,可以解决大部分简单需求,这个例子可以满足你并行步骤数比较固定的二叉树画法的流程图。
这是官网的例子,其中模块,线,箭头等画布元素都可以交互。
由于我的并行步骤数不固定,于是在图中加入了Group(组)。先展示一下成品:
其中批次中可以包含多个项目,表示并行的步骤。
具体实现
分为两个文件:
diagram.vue && stepMap.vue
diagram.vue声明组件,stepMap引用
diagram.vue
基本声明:
声明后在stepMap调用,比较重要的是这两个方法:
updateDiagramFromData: function() { this.$refs.diag.updateDiagramFromData(); // 数据变化时调用组件中的更新方法 }, changedSelection: function(e) { let node = e.diagram.selection.first(); if (node instanceof go.Node) { this.currentNode = node; this.currentNodeText = node.data.text; this.selectNode(node.data); } else { this.currentNode = null; this.currentNodeText = ''; } },
最后,将需要展示的数据转化为需要的格式就可以啦。
流程图所需格式如下:
无分组: "nodeDataArray": [ {"key":1, "text":"Alpha", "color":"lightblue"}, {"key":2, "text":"Beta", "color":"orange"}, {"key":3, "text":"Gamma", "color":"lightgreen"}, {"key":4, "text":"Delta", "color":"pink"} ] "linkDataArray": [ {"from":1, "to":2}, {"from":1, "to":3}, {"from":3, "to":4} ] 有分组: var nodeDataArray = [ { key: "Alpha" }, { key: "Beta", group: "Omega" }, { key: "Gamma", group: "Omega" }, { key: "Omega", isGroup: true }, { key: "Delta" } ]; var linkDataArray = [ { from: "Alpha", to: "Beta" }, { from: "Beta", to: "Gamma" }, { from: "Omega", to: "Delta" } ];
相关文章
- 逆水寒手游流派首席竞选怎么玩 11-07
- 宝可梦大集结新手宝可梦怎么选 11-07
- 光遇11.7每日任务怎么做 11-07
- 英雄联盟双城之战2主题曲怎么样 11-07
- 《怪物猎人荒野》锁头机制介绍 11-07
- 逆水寒手游流派首席竞选怎么玩 逆水寒手游流派首席竞选玩法介绍 11-07