序言和陈述

项目中需要根据传输的数据绘制流程图，采用GOJS插件，功能全面，可以根据自己的需要进行调整。但建议简单的流程图由一个组件手写，更便于维护和改造。需要注意的一点是，GOJS需要收费，并且有水印。虽然可以手动移除，但如果公司使用，还是需要购买。在GOJS的官网上，有一个在VUE应用GOJS的小例子：Vue.js中的Minimal GoJS Sample推荐大家看一下，可以解决大部分简单的需求。这个例子可以满足固定并行步数的二叉树绘制流程图。

这是一个官网的例子，模块、线条、箭头等画布元素可以在其中交互。因为我的并行步骤数量不是固定的，所以我在图表中添加了一个组。先展示成品：

一个批次可以包含多个项目，代表并行步骤。

具体实现

它分为两个文件：图. vue stepMap.vue图. vue声明组件和stepMap引用

图表. vue

基本陈述：

脚本导入从“gojs”开始；放手吧。GraphObject.make//此变量用于初始化图导出默认{name :' diagram '，props: ['model data']，//接受模型数据作为参数数据(){return {diagram : null，}；}，//提供对gojs图的访问初始化图：

mount ed : function(){ let self=this；让myDiagram=$(go .图表，这个$el，{ '初始内容对齐' : go .斑点。中心，“isEnabled”: false，//是否可拖拽，默认为是//'工具管理器。MousewheelBehavior ' : go .工具管理器。WheelNone，“允许链接”: false，“允许移动”: false，“允许链接”: false，//由于项目只想展示数据，我禁用了大部分图像交互操作，具体可参看官网API '布局' : $(go .TreeLayout，{angle: 0，arrangement: go .TreeLayout。水平排列水平}),//角度可控制图像展示方向撤消管理器。isenabled ' : true，//Model ChangedEvents向上传递给组件用户ChangedSelection ' :函数(e){ self .$emit('changed-selection '，e)；}, });myDiagram.nodeTemplate=//节点的初始化设置$(走。节点，"自动",$(开始。形状，//节点形状设置{ fill: 'white '，strokeWidth: 1，portId: ' '，fromLinkable: true，toLinkable: true，cursor: 'pointer '，}，new go .绑定(' fill '，''，this . nodecordconverter))，//nodecordconverter是我自定义函数，根据节点状态设置节点的背景颜色$(走文本块，//节点提示文字设置{margin: 16，editable: false}，新走吧.绑定('文本')。maketowway()))；myDiagram.linkTemplate=$(go .链接，{可重新链接的只读存储器：为真，可重新链接的只读存储器：为真},$(转到。形状，//连线形状设置{strokeWidth: 2}，全新走吧.绑定(' stroke '，''，this.linkColorConverter))，//连线的颜色设置$(走。形状，//箭头{toArrow: '三角形，stroke: null，scale: 1.5}，//箭头设置新围棋。绑定('填充'，'，这个。LinkColorConverter)))；myDiagram.groupTemplate=//分组的初始化$(走。组，"自动",{ //定义组的内部布局布局：美元(go .TreeLayout，{angle: 90，arrangement: go .TreeLayout。ArrangementVertical，isRealtime: false })，//组开始未展开；//展开时，一个图表侦听器会为该组生成内容//当一个组展开时，如果该组不包含任何部分，则在其内部生成一个子图//subGraph xpandedchanged :函数(组){//if(组。成员部分。count===0){//randomGroup(group。数据。键)；//}/}、}、$(go .形状，'矩形，{fill: null，stroke: 'gray '，strokeWidth: 2})，$(go .面板，"垂直”，{defaultAlignment: go .现货。左侧，保证金： 4},$(开始。面板，"水平”，{defaultAlignment: go .斑点。Top}，$(' subgradiexpanderbutton '，{alignment: go .斑点。顶部，边距：5 })，子窗口展开按钮是一个面板，用作展开或折叠子图$(go)的按钮文本块，{ font: 'Bold 14px Sans-Serif '，边距：10 }，新走吧.绑定(“文本”，“文本”))，//创建一个占位符来表示组内容所在的区域走吧.占位符，{ padding:新go .边距(0,10)}),)//结束垂直面板);//结束Group //生成初始模型this . diagrammthis=my diagrammthis。updatemodel(这。模型数据)；更新图中数据时需要的函数：

watch: { modelData:函数{这个。update model(val)；}，}，方法： { model : function(){ return this。图表。模型；}，updateModel:函数(val) { //替换图表。模特。if(go值实例)时不允许进行GoJS事务模型){这个。图表。model=val} else {让m=新go .GraphLinksModel()；if (val) { for(让p进入val){ if(val[p]){ m[p]=val[p]；} } }这个。图表。模型=m；} }，updateDiagramFromData:函数(){这个。图表。start transaction()；//这很笼统，但效率很低。//最好通过调用//Model.setDataProperty或Model.addNodeData，et al .这个。图表。updateallrelationsfromdata()来修改诊断数据数据；这个。图表。updatealltargetbindings()；这个。图表。委托交易('已更新');}, }, };/script声明后在stepMap调用，比较重要的是这两个方法：

updatediagrammfromtata :函数(){这个.参考文献。斜的updategraphromdata()；//数据变化时调用组件中的更新方法}，changedSelection:函数(e){ let node=e .图。选择。first()；如果(节点实例走吧.节点){ this。当前节点=节点；这个。CurrentNodeText=节点。数据。文本；这个。选择节点(node。数据)；} else { this . CurrentNode=null this . CurrentNodeText=} }，最后，将需要展示的数据转化为需要的格式就可以啦。

流程图所需格式如下：

无分组：' nodedata array ' :[{ ' key ' :1，' text':'Alpha '，' color':'lightblue'}，{'key':2，' text':'Beta '，' color':'orange'}，{'key':3，' text ' : ' Gamma '，' color':'lightgreen'}，{ ' key ' :4，' text '有分组：var nodedata array=[{ key : ' Alpha ' }，{ key: 'Beta '，group: 'Omega' }，{ key: 'Gamma '，group: 'Omega' }，{ key: 'Omega '，isGroup: true }，{ key : ' Delta ' }]；var linkDataArray=[{从： ' Alpha '，到： 'Beta' }，{从： 'Beta '，到： 'Gamma' }，{从： 'Omega '，到： ' Delta ' }]；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。