伏龙阁资源网

vue中使用gojs/jointjs的示例代码
站长资源 2024/11/27 佚名
2 0

因为公司项目需求，要画出相关业务的流程图，以便客户了解自己身处何处

搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种

flow-chart

代码写法繁琐，不是json就可以解决，效果也比较丑,PASS

darge-d3

github :https://github.com/dagrejs/dagre-d3

效果图

vue中使用gojs/jointjs的示例代码

下载里面的demo,改一下json就可以了

// States 
var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", 
    "CANCELED", "ABOLISHED" , "DELETED","REFUNDING","REFUNDED"];
var map = ['新创建','已提交','已完成','提交失败',"交付中",
    '已取消','废除','已删除','退款中',"已退款"]
// Automatically label each of the nodes
states.forEach(function(state,index) { g.setNode(state, { label: `${map[index]}(${state})`})});

// Set up the edges
g.setEdge("NEW", "FAILED",  { label: "后台接口自动"});
g.setEdge("NEW", "SUBMITTED", { label: "后台接口自动" });
g.setEdge("NEW", "CANCELED", { label: "用户取消订单" });
g.setEdge("SUBMITTED","CANCELED",  { label: "用户取消订单" });
g.setEdge("SUBMITTED", "ABOLISHED", { label: "用户超过48小时未支付，\n系统自动取消"});
g.setEdge("ABOLISHED","DELETED",  { label: "已删除" });
g.setEdge("CANCELED", "DELETED", { label: "已删除"});
g.setEdge("FAILED", "SUBMITTED",  { label: "后台接口自动" });

g.setEdge("SUBMITTED", "DELIVER",  { label: "用户支付" });
g.setEdge("FINISHED", "REFUNDING",  { label: "用户退款" });

g.setEdge("DELIVER", "FINISHED",  { label: "交付完成" });
g.setEdge("REFUNDING", "REFUNDED",  { label: "已退款" });
g.setEdge("REFUNDED", "DELETED",  { label: "已删除" });
g.setEdge("DELIVER", "REFUNDING",  { label: "用户退款" });
g.setEdge("FAILED", "CANCELED",  { label: "用户取消订单" });

不满意的地方：画出来的图是垂直方向的，我要的是水平方向,PASS

gojs

GoJS是一个实现交互类图表（比如流程图，树图，关系图，力导图等等）的JS库。本文将介绍GoJs的精华部分。
因为GoJS依赖于HTML5，所以请保证您的浏览器版本支持HTML5，当然还要加载这个库。

github :https://github.com/NorthwoodsSoftware/GoJS

可以通过npm install gojs -save安装

效果图

vue中使用gojs/jointjs的示例代码

看里面的demo我自己包装了一下

<template>
<div>
 <p style="background-color:#d5d5d5;margin:0;padding:5px;">
 您当前处于 <span class="tip">用户提交资料</span> 步骤 
 下一步等待<span class="tip">供应商接单</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 id="myDiagramDiv" v-show="show" ></div>
 </div> 
 
</template>
<style scoped>
.tip{
 color:red;
 font-size:0.8em;
 font-weight:bold;
 padding:5px;
}
#myDiagramDiv{
 height: 200px; 
 border: solid 1px #d3d3d3;
}

</style>
<script>
window.go =require('./go.js') 
var $ = go.GraphObject.make;

import datam from './data';
export default{
 mixins:[datam],
 data(){
 return{
  myDiagram:null,
  show:true
 }
 },
 mounted(){
 this.load();
 },
 methods:{
 load(){
  this.init();
  this.addNodeTemplate(this.User);
  this.addNodeTemplate(this.Supplier);
  this.layout();
 },
 layout() {
  this.myDiagram.model = go.Model.fromJson(this.myjson);
  this.myDiagram.layoutDiagram(true);
 },

 getOption(){
  // for conciseness in defining templates

  let options={
  yellowgrad : $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
  greengrad : $(go.Brush, "Linear", { 0: "#98FB98", 1: "#9ACD32" }),
  bluegrad : $(go.Brush, "Linear", { 0: "#B0E0E6", 1: "#87CEEB" }),
  redgrad : $(go.Brush, "Linear", { 0: "#C45245", 1: "#871E1B" }),
  whitegrad : $(go.Brush, "Linear", { 0: "#F0F8FF", 1: "#E6E6FA" }),
  bigfont : "bold 8pt Helvetica, Arial, sans-serif",
  smallfont : "bold 6pt Helvetica, Arial, sans-serif",
  
  }

  return options;
 },

  textStyle(){
  return {
   margin: 6,
   wrap: go.TextBlock.WrapFit,
   textAlign: "center",
   editable: true,
   font: this.getOption()['bigfont']
  }
  },
  init(){
  this.myDiagram =
   $(go.Diagram, "myDiagramDiv",
    {
    isReadOnly: true,
    // have mouse wheel events zoom in and out instead of scroll up and down
    "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone,
    initialAutoScale: go.Diagram.Uniform,
    "linkingTool.direction": go.LinkingTool.ForwardsOnly,
    initialContentAlignment: go.Spot.Center,
    layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }),
    "undoManager.isEnabled": true
    });
    //默认节点模板
  this.myDiagram.nodeTemplate =
   $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    // define the node's outer shape, which will surround the TextBlock
    $(go.Shape, "Rectangle",
    { fill: this.getOption()['yellowgrad'], stroke: "black",
     portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
     toEndSegmentLength: 50, fromEndSegmentLength: 40 }),
    $(go.TextBlock, "Page",
    { margin: 6,
     font: this.getOption()['bigfont'],
     editable: true },
    new go.Binding("text", "text").makeTwoWay()));
   // replace the default Link template in the linkTemplateMap
   this.myDiagram.linkTemplate =
    $(go.Link, // the whole link panel
     new go.Binding("points").makeTwoWay(),
     { curve: go.Link.Bezier, toShortLength: 15 },
     new go.Binding("curviness", "curviness"),
     $(go.Shape, // the link shape
     { stroke: "#2F4F4F", strokeWidth: 2.5 }),
     $(go.Shape, // the arrowhead
     { toArrow: "kite", fill: "#2F4F4F", stroke: null, scale: 2 })
     );
  },
  /**
  * options:{
  * category
  * shape:RoundedRectangle/Rectangle
  * shapeOptions:{
  * fill:bluegrad/greengrad/yellowgrad/null/redgrad/whitegrad 自定义的
  * stroke: "black",
  * portId:""
  * fromLinkable:true
  * toLinkable:
  * cursor:"pointer"
  * fromEndSegmentLength:40
  * toEndSegmentLength
  * strokeWidth
  * 
  * }
  * textStyle:{
  *  margin: 9,
  *  maxSize: new go.Size(200, NaN),
  *  wrap: go.TextBlock.WrapFit,
  *  editable: true,
  *  textAlign: "center",
  *  font: smallfont 
  * },
  * 
  * }
  */
  addNodeTemplate(options){
  let fill = this.getOption()[options.shapeOptions.fill];
  options.shapeOptions.fill = fill;
  this.myDiagram.nodeTemplateMap.add(options.category,
   $(go.Node, "Auto",
   new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
   $(go.Shape, options.shape,options.shapeOptions),
   $(go.TextBlock, this.textStyle(),
    new go.Binding("text", "text").makeTwoWay())
   ));
  },

 }


}
</script>

不满意的地方：

  1. 免费版gojs是有水印的，百度搜索“gojs如何去水印”有一堆答案，我就不写了。
  2. 因为要自己手动去掉水印，所以我只能手动下载go.js放在我自己的组件目录下，但是这个文件太大了，800+KB,npm run dev 的时候停在这里停了好久。有时候还爆出“......maximun ....500KB”的错误，我也不知道是什么原因，不知道有什么方法，有的话麻烦通知我。
  3. 代码写法有点太繁琐

这是我自己包装的代码地址：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

效果图

vue中使用gojs/jointjs的示例代码

可以通过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 id="container">
 <p style="background-color:#EEEEEE;margin:0;padding:5px;font-size:0.9em">
 您当前处于 <span class="tip">用户提交资料</span> 步骤 
 下一步等待<span class="tip">供应商接单</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 id="myholder" v-show="show"></div>
</div>
</template>
<script>
window.joint=require('jointjs');
var Shape = joint.dia.Element.define('default.Rectangle', {  
  attrs: { 
   rect: {
    refWidth: '100%',
    refHeight: '100%',
    //下面这些可以自己设置
    fill:{
     type: 'linearGradient',
     stops: [
      {offset: '0%', color: '#B0E0E6'},//渐变开始
      {offset: '100%', color: '#F0F8FF'}//渐变结束
     ]
    },
    stroke: '#B0E0E6',
    strokeWidth: 1,
    rx: 5,//圆角
    ry: 5
   },
   text: {
    refX: '50%',
    refY: '50%',        
    textVerticalAnchor: 'middle',
    textAnchor: 'middle',
    fontSize: 10   
   }
   }     
 }, 
 {
   markup: '<rect/><text/>',
   setText: function(text) {     
   return this.attr('text/text', text || '');
  },
  setShapeStyle:function(shapeStyle){
   let newstyle = Object.assign({},this.attr('rect'),shapeStyle);
   return this.attr('rect',newstyle)
  },
  
  setTextStyle:function(textStyle){
   let newstyle = Object.assign({},this.attr('text'),textStyle);
   return this.attr('text',newstyle)
  }
 }
);

var Link = joint.dia.Link.define('default.Link', {
  attrs: {
   '.connection': {
    stroke: '#2F4F4F',//线
    strokeWidth: 1,
    pointerEvents: 'none',
    targetMarker: {//箭头
     type: 'path',
     fill: '#2F4F4F',//填充颜色
     stroke: '#2F4F4F',//边框颜色
     strokeWidth:'1',
     d: 'M 2 -2 0 0 2 2 z'//形状
    }
   }
  },
  connector: {
   name: 'rounded'
  },
  z: -1,
  weight: 1,
  minLen: 1,
  labelPosition: 'c',
  labelOffset: 10,
  labelSize: {
   width: 50,
   height: 30
  },
  labels: [{
   markup: '<rect/><text/>',
   attrs: {
    text: {
     fill: 'gray',
     textAnchor: 'middle',
     refY: 5,
     refY2: '-50%',
     fontSize: 10,
     cursor: 'pointer'
    },
    // rect: {
    //  fill: 'lightgray',
    //  stroke: 'gray',
    //  strokeWidth: 2,
    //  refWidth: '100%',
    //  refHeight: '100%',
    //  refX: '-50%',
    //  refY: '-50%',
    //  rx: 5,
    //  ry: 5
    // }
   },
   size: {
    width: 50, height: 10
   }
  }]

 }, {
  markup: '<path class="connection"/><g class="labels"/>',
  
  connect: function(sourceId, targetId) {
   return this.set({
    source: { id: sourceId },
    target: { id: targetId }
   });
  },

  setLabelText: function(text) {
   return this.prop('labels/0/attrs/text/text', text || '');
  }
 });



var ElementView = joint.dia.ElementView.extend({
  pointerdown: function () {

   // this._click = true;
   // joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
  },
  pointermove: function(evt, x, y) {
   // this._click = false;
   // joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
  },
  pointerup: function (evt, x, y) {
   // if (this._click) {
   //  // triggers an event on the paper and the element itself
   //  this.notify('cell:click', evt, x, y); 
   // } else {
   //  joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
   // }
  }
 });
var LinkView = joint.dia.LinkView.extend({
 addVertex: function(evt, x, y) {},
 removeVertex: function(endType) {},
 pointerdown:function(evt, x, y) {}
});


export default { 
 data(){
  return{
   graph:null,
   paper:null,
   show:true
  }  
 },
 props:{
  graphData:{
   type:Object,
   required:true
  }
 },
 mounted(){
  let w = document.getElementById('container').width ; 
  this.graph = new joint.dia.Graph;
  this.paper = new joint.dia.Paper({
   el: document.getElementById('myholder'),
   width: w,
   height: 250,   
   model: this.graph,
   elementView: ElementView,//禁止拖拽
   linkView:LinkView//禁止拖拽
  });
  this.layout();
 },
 methods:{
  getWidthandHeight(label){
   let maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length,

   // Compute width/height of the rectangle based on the number
   // of lines in the label and the letter size. 0.6 * letterSize is
   // an approximation of the monospace font letter width.
    letterSize = 8,
    width = 2 * (letterSize * (0.6 * maxLineLength + 1)),
    height = 2 * ((label.split('\n').length + 1) * letterSize);
   return {width,height}
  },
  getLayoutOptions() {
   return {
    // setVertices: false,
    // setLabels: false,
    // ranker:'longer-path',//'tight-tree'/'network-simplex',
    rankDir: 'LR',
    align: 'UR',
    rankSep:0,
    edgeSep:0,
    nodeSep:0,
   };
  },
  buildGraphFromAdjacencyList(adjacencyList) {
   let elements = [],links = [],obj,size,node;
   const _this=this;
   const map=this.graphData.node;

   Object.keys(adjacencyList).forEach(function(parentId) {
    // Add element

    obj =map[parentId];
    size = _this.getWidthandHeight(obj.text);
    node =new Shape({id:parentId,size:size}).setText(obj.text);

    if(obj.category&&obj.category.shapeStyle){
     node = node.setShapeStyle(obj.category.shapeStyle);
    }
    if(obj.category&&obj.category.textStyle){
     node = node.setTextStyle(obj.category.textStyle);
    }

    elements.push(node);
    
    // Add links
    adjacencyList[parentId].forEach(function(childId) {
     links.push(
      new Link().connect(parentId, childId)// .setLabelText(parentLabel + '-' + childLabel)           
     );
    });
   });

   return elements.concat(links);
  },
  layout() {   
   let cells = this.buildGraphFromAdjacencyList(this.graphData.edge); 
   this.graph.resetCells(cells);
   joint.layout.DirectedGraph.layout(this.graph, this.getLayoutOptions());
  },
 }
}
</script>

<style>
#myholder {
 border: 1px solid lightgray;
 margin-bottom:20px;
 padding-left:20px
}
.tip{
 color:#9ACD32;
 font-size:0.9em;
 font-weight:bold;
 padding:5px;
}
</style>

这是我自己包装的代码地址：https://github.com/LRY1994/vue-lib/tree/master/src/components/process-joint

这个目前看来还算满意

jsplumb

这个看了官网，不太友好，而且下载只有一个js文件，没有demo代码，不知如何下手

参考资料：

https://gojs.net/latest/samples/pageFlow.html
http://www.daviddurman.com/assets/autolayout.js
http://resources.jointjs.com/demos/layout

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接