第一步：引入package.json引入gojs依赖包-- "gojs": "^2.0.3", (npm install gojs --save)
第二步：运行下述代码
Vue+Gojs实现流程图demo
原文链接： https://my.oschina.net/u/3692675/blog/3016728
第三步：去水印
- 在文件中搜索
7eba17a4ca3b1a8346，找到类似a.$q=b.V[Za("7eba17a4ca3b1a8346")][Za("78a118b7")](b.V,yk,4,4);这样结构的代码 - 将其注释，替换成
a.$q=function(){return true;}; - 直接npm install可以在module里寻找go.js文件，需修改的代码一般在769行
------拓展：相关构建gojs流程图时的某些参数及相关配置使用方式
====================-构建gojs流程面板
import go from 'gojs'
const MAKE = go.GraphObject.make;
mySelf.myDiagram = MAKE(go.Diagram, "mygoChart", {
initialContentAlignment: go.Spot.Center, // 居中显示
"undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
"toolManager.hoverDelay": 100, //tooltip提示显示延时
"toolManager.toolTipDuration": 10000, //tooltip持续显示时间
//isReadOnly:true,//只读
"grid.visible": true, //显示网格
allowMove: true, //允许拖动
// allowDragOut:true,
allowDelete: true,//允许删除
allowCopy: true,//允许复制
allowClipboard: false,//允许剪切
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
layout: MAKE(go.TreeLayout, {//创建布局,示例为树
angle: 0, //角度
layerSpacing: 35 //层间距
})
}); //构建gojs对象
====================-
mySelf.myDiagram.nodeTemplateMap.add(： //声明左侧Node工具栏Tools
"Next", // 关键参数,需要与init初始化时window.myPalette中model对象配置的category保持一致
MAKE(
go.Node, //
"Spot",
// nodeStyle(),
MAKE(//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
go.Panel, //表明需要创建一个panel面板对象
"Auto", //页面布局为自动
MAKE( //声明构建一个圆角矩形
go.Shape,
"RoundedRectangle", {
fill: "rgb(54, 128, 181)", //内填充颜色
stroke: null //外边框颜色
},
new go.Binding("figure", "figure") //声明并创建一个新的图形
),
MAKE( //声明一个可编辑文本域
go.TextBlock, {
font: "11pt Helvetica, Arial, sans-serif",
stroke: lightText,
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit, //文本域换行
editable: true //是否可编辑
},
new go.Binding("text").makeTwoWay()
)
),
makePort("T", go.Spot.Top, false, true),//创建Top顶端可延申链接点
makePort("L", go.Spot.Left, true, true),//创建Left左端可延申链接点
makePort("R", go.Spot.Right, true, true),//创建Righ右端可延申链接点
makePort("B", go.Spot.Bottom, true, false)//创建Buttom底端可延申链接点
)
);
====================-自定义流程图流程节点相关配置
mySelf.myDiagram.nodeTemplate : 自定义流程图节点
-> MAKE(go.Node,//声明创建的是node对象
new go.Binding("location", "loc", go.Point.parse),//创建节点并设定节点的初始位置
MAKE(go.Shape, "RoundedRectangle", {//构建节点的形状,示例为圆角矩形
fill: "#44CCFF",//模块内填充颜色
stroke: 'green',//外填充颜色(可理解为margin,也可以当成外边框颜色来理解)
strokeWidth: 2,//外边框(填充)宽度
angle: 0//模块形状的偏移量(角度)
}),
"Auto", //设置并定义节点模块内容布局走向:Vertical(垂直),Auto(自动),Horizontal(水平)
{ background: "#44CCFF" },//将Node背景底色渲染为蓝色
MAKE(go.Picture,//构建Node区域图像类内容
{ source:"../assets/img/01.png",margin: 10, width: 50, height: 50, background: "red" },//基本参数设置
new go.Binding("source")),//*Picture.source参数值与模型数据中的"source"字段绑定
MAKE(go.TextBlock,//构建Node区域文本类内容
"Default Text", // 初始化默认文本
// 文字周围的空隙, 大号字体, 白色笔画:
{ margin: 12, stroke: "white", font: "bold 16px sans-serif",
width:75,
wrap: go.TextBlock.WrapDesiredSize
},
new go.Binding("text", "name1")), // name1为linktext为nodeDataArray对象中的参数
{
mouseEnter: function(e, node, prev) {
console.log('mouseEnter');//鼠标点击事件
},
mouseLeave: function(e, node, prev) {
mySelf.detailShow = false;//鼠标移开事件
},
},
MAKE(go.Panel, "Horizontal", {//创建并设置node内模板:实现Node块内的控件布局
padding: 5
},
====================-自定义流程图连接线相关配置
mySelf.myDiagram.linkTemplate:自定义流程图连接线
-> { curve: go.Link.Bezier } ： 设置并定义连接线曲线样式,示例为贝塞尔曲线
-> MAKE(go.Shape, {
strokeWidth: 2, //连接线宽(厚)度
stroke: "#F60"//连接线笔画默认(未选中)颜色
}) : 设置并定义连接线宽度及颜色
-> MAKE(go.Shape, {
toArrow: "Standard",//箭头样式,示例为标准
fill: "#000",//箭头的填充颜色(内填充,可以理解为padding)
stroke: null//连接线笔画默认(未选中)颜色,(外填充,可以理解为margin)
}), //设置并定义箭头样式
--> MAKE(go.TextBlock, { //文本块创建器
margin: 20,//外边距,默认单位为px
stroke: "blue",//字体颜色
font: "14px sans-serif",//字体样式
width:50,//内容宽度
wrap: go.TextBlock.WrapDesiredSize//样式包装器
},
new go.Binding("text", "linktext")), { //创建并绑定显示的文本域信息,linktext为nodeDataArray对象中的参数
toolTip: MAKE(go.Adornment, "Auto",
MAKE(go.Shape, {
fill: "#FFFFCC",//悬浮提示框内填充颜色
}),
MAKE(go.TextBlock, {
margin: 4 // 外边距
}, new go.Binding("text", "name1")) //创建并绑定显示的文本域信息,name1为nodeDataArray对象中的参数
) ：设置并定义鼠标悬浮提示信息样式
} : 设置并定义连接线指示及指针悬浮提示内容
=================-渲染数据相关配置
--> let myModel = MAKE(go.Model);//无连接线模型渲染
let myModel = MAKE(go.GraphLinksModel);//指定连接(适用于复杂业务);需要配置myModel.linkDataArray
let myModel = MAKE(go.TreeModel); //使用Tree树图模型渲染
--> myModel.nodeDataArray = [{},{},{}] : 流程节点数据(对象数组)
--> myModel.linkDataArray = [ {from:"1",to:"2"}, {from:"1",to:"2"}……] : 流程链接指示数组,用于构建各个node节点间的数据关系，需要使用go.GraphLinksModel
--> mySelf.myDiagram.model = myModel; 需渲染数据赋值
转载于:https://my.oschina.net/u/3692675/blog/3016728