因为要自己手动去掉水印，所以我只能手动下载go.js放在我自己的组件目录下，但是这个文件太大了，800+KB,npm run dev 的时候停在这里停了好久。有时候还爆出“......maximun ....500KB”的错误，我也不知道是什么原因，不知道有什么方法，有的话麻烦通知我。
代码写法有点太繁琐
这是我自己包装的代码地址：https://github.com/LRY1994/vue-lib/tree/master/src/components/process-go
jointjs
相比Dagre-D3和jsPlumb，JointJS的API很详细，代码量少，连接线有多种选择，封装了多种常用的形状，而且能画的图很多，官方也给了一些demo可以参考。
github : https://github.com/clientIO/joint
效果图
可以通过npm install jointjs -save安装
参照了很多demo和文档，用的是矩形，但是可以设置圆角的度数变成椭圆形，其他形状我就无力了。
可以自定义矩形的样式和矩形框里面的文字样式
//data.vue <script> export default { data(){ var userClass = {//这个要参照SVG属性 /**shapeStyle * fill:填充的背景颜色 stroke: 边框颜色 strokeWidth: 边框宽度 rx: 圆角 ry: */ shapeStyle:{//矩形样式 fill:{ type: 'linearGradient', stops: [ {offset: '0%', color: '#98FB98'}, {offset: '100%', color: '#9ACD32'} ], }, rx:150, ry:15 }, /** * textStyle * fontWeight * fontSize * */ textStyle:{//文本样式 fontWeight:'bold' } }; return{ graphData :{ node:{ '100':{text:'用户提交资料',category:userClass}, '101':{text:'用户完善资料',category:userClass}, '102':{text:'用户确认完成',category:userClass}, '103':{text:'用户撤销',category:userClass}, '200':{text:'供应商驳回'}, '201':{text:'供应商接单'}, '202':{text:'供应商完工'}, '203':{text:'等待供应商处理'}, '300':{text:'系统交付出错'} }, edge :{//每个点都要写 '100': ['200','201','103'], '101': ['201'], '102':[], '103': ['100'], '200': ['101'], '201': ['202','300'], '202': ['102'], '203': ['102'], '300': ['203'], }, } } } } </script>
<template> <div> <p> 您当前处于 <span>用户提交资料</span> 步骤 下一步等待<span>供应商接单</span> <el-button type="text" v-if="show===false" @click="show=true">展开</el-button> <el-button type="text" v-else @click="show=false">收起</el-button> </p> <div v-show="show"></div> </div> </template>