vue 使用gojs绘制简单的流程图

在vue项目中需要展示工作流进度,可以使用的流程图插件很多

• flowchart.js  http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart

• go.js http://www.gojs.net/latest/index.html  go.js 提供一整套的JS工具 ，支持各种交互式图表的创建。有免费版和收费版

• joint.js http://www.jointjs.com/ joint.js 是另一个创建图标库的工具，也提供免费版和商业版

• jsPlumb http://www.jsplumb.org/  jsPlumb是一套开源的流程图创建工具 ，小巧精悍，使用简单

• d3 http://d3js.org 在html5领域，d3可谓是最好的可视化基础库，提供方面的DOM操作，非常强大

最终选用了gojs，API文档介绍的很细致，在vue项目中使用也比较方便，一下只是哥简单的学习示例。

　　API文档地址：https://gojs.net/latest/intro/sizedGroups.html

一、引入gojs

npm install gojs --save

import go from'gojs'//引入gojs

二、开始使用

　　在mounted中调用gojs，以为在vue实例挂载完成后才可以拿到容器元素

　　模板如下：

<template>
  <div class="goDemo">
    <div id="mygoChart" style="width:1000px; height:600px; background-color: #ECA;"></div>
    <button @click="toBig">放大</button>
    <button @click="toSmall">缩小</button>
    <button @click="toFilt">自动</button>
  </div>
</template>

　　

　　mounted钩子函数如下：

mounted(){
    var mySelf = this;
    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:false,
      allowCopy:false,
      allowClipboard:false,
      "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
      layout:MAKE(go.TreeLayout,{
        angle: 0, 
        layerSpacing: 35
        })
      });//构建gojs对象
      console.log(mySelf.myDiagram);
      mySelf.myDiagram.addDiagramListener("ObjectSingleClicked",function (e) { 
        debugger
        console.log(e.subject.part);
         
      });

      mySelf.myDiagram.addDiagramListener("BackgroundSingleClicked",function (e) {
        debugger
        console.log("Double-clicked at" + e.diagram.lastInput.documentPoint);
      });

      mySelf.myDiagram.addDiagramListener("ClipboardPasted",function (e) { 
        debugger
        console.log("Pasted" + e.diagram.selection.count + "parts");
      });

    // define a simple Node template
    // 定义个简单的 Node 模板
    mySelf.myDiagram.nodeTemplate =
      MAKE(go.Node, 
      new go.Binding("location", "loc", go.Point.parse),
      MAKE(go.Shape, "RoundedRectangle", { fill: "#44CCFF",stroke: 'green',strokeWidth:2,angle:15 }),
      "Auto",//Vertical,Auto,Horizontal
        // 为整个Node背景设置为浅蓝色
        // { background: "#44CCFF" },
        
        // MAKE(go.Picture,
        //   // Pictures 应该指定宽高.
        //   // 当没有图片时显示红色的背景
        //   // 或者当图片为透明的时候也是.
        //   { source:"../assets/img/01.png",margin: 10, width: 50, height: 50, background: "red" },
        //   // Picture.source参数值与模型数据中的"source"字段绑定
        //   new go.Binding("source")),
        // MAKE(go.TextBlock,
        //   "Default Text",  // 初始化默认文本
        //   // 文字周围的空隙, 大号字体, 白色笔画:
        //   { margin: 12, stroke: "white", font: "bold 16px sans-serif",
        //     width:75,
        //     wrap: go.TextBlock.WrapDesiredSize 
        //   },
        //   // TextBlock.text参数值与模型数据中的"name"字段绑定
        //   new go.Binding("text", "name1")),
          MAKE(go.Panel, "Horizontal",{padding:5},
            MAKE(go.Panel, "Vertical",
              MAKE(go.Picture,
                { margin: 10, width: 50, height: 50, background: "red" },
                new go.Binding("source","img")
              )
            ),
            MAKE(go.Panel, "Vertical",
              MAKE(go.TextBlock, "Default Text", {margin: 12, stroke: "white", font: "bold 16px sans-serif",},new go.Binding("text", "name1")),
              MAKE(go.TextBlock, { stroke: "red" },{margin: 5},new go.Binding("text", "name2")),
              MAKE(go.TextBlock, { background: "lightblue" },{margin: 5,},new go.Binding("text", "name3")),
            ),
          ),
          {
            mouseEnter:function(e,node,prev){
              console.log('mouseEnter');
            },
            mouseLeave:function(e,node,prev){
              mySelf.detailShow = false;
            },
          },
          {
            toolTip:MAKE(go.Adornment, "Spot",
              //{background:"transparent" },
              MAKE(go.Shape,"RoundedRectangle", { 
                // fill: "blue" ,
                  height:30,
                  fill: MAKE(go.Brush, "Linear", { 0.0: "blue", 1.0: "red", start: go.Spot.Bottom, end: go.Spot.Top })
                }),
              MAKE(go.TextBlock,
              //{alignment:go.Spot.Top,alignmentFocus:go.Spot.Bottom,stroke:"red" },
              { margin: 4,stroke: "white" },new go.Binding("text", "name1"))
            )  // end of Adornment
          }
      );
      mySelf.myDiagram.linkTemplate = MAKE(go.Link,
        //{ curve: go.Link.Bezier },  // 贝塞尔曲线
        { routing: go.Link.Orthogonal, corner: 5 },
        MAKE(go.Shape, { strokeWidth: 2, stroke: "#e4393c" }),
        MAKE(go.Shape, { toArrow:"Standard",fill:"#000",stroke:null }),//箭头
        MAKE(go.TextBlock,
          { 
            //margin: 20, 
            stroke: "blue",
            //font: "14px sans-serif",
            //width:50,
            //wrap: go.TextBlock.WrapDesiredSize 
          },
          new go.Binding("text", "linktext")),
          {
            toolTip:MAKE(go.Adornment, "Auto",
              MAKE(go.Shape, { fill: "#FFFFCC" }),
              MAKE(go.TextBlock, { margin: 4 },new go.Binding("text", "name1"))
            )  // end of Adornment
          }
        );// the link shape
    // let myModel = MAKE(go.Model);//如果不需要连线可以用这样的方法创建model
    // let myModel = MAKE(go.GraphLinksModel);//也可以创建link model;需要配置myModel.linkDataArray 如下
    let myModel = MAKE(go.TreeModel);
    myModel.nodeDataArray =
    [ // note that each node data object holds whatever properties it needs;
      // for this app we add the "name" and "source" properties
      {key:"1", name1: "董事长",name2: "秘书1", name3: "秘书2", img: require("../assets/img/01.png"), },
      {key:"2", parent:"1", name1: "秘书", name2: "秘书1", name3: "秘书2", linktext:"link", img: require("../assets/img/03.png") },
      {key:"3", parent:"1", name1: "CEO",  name2: "秘书1", name3: "秘书2", linktext:"link", img: require("../assets/img/01.png") },
      {key:"4", parent:"3", name1: "总经理",  name2: "秘书1", name3: "秘书2", linktext:"link", img: require("../assets/img/02.png") },
      {key:"5", parent:"4", name1: "二狗子",  name2: "秘书1", name3: "秘书2", linktext:"link", img: require("../assets/img/01.png") },
    ];
    // myModel.linkDataArray = [
    //   {from:"1",to:"2"},
    //   {from:"1",to:"3"},
    //   {from:"1",to:"4"},
    //   {from:"1",to:"5"},
    // ];
    // function diagramInfo(myModel) {
    //   return "myModel:\n" + myModel.nodeDataArray.length + " nodes, " +myModel.linkDataArray.length + " links";
    // }
    // mySelf.myDiagram.toolTip = MAKE(go.Adornment, "Auto",
    //   MAKE(go.Shape, { fill: "#CCFFCC" }),
    //   MAKE(go.TextBlock, { margin: 4 },
    //     // use a converter to display information about the diagram model
    //     new go.Binding("text", "", diagramInfo))
    // );
    mySelf.myDiagram.model = myModel;
    
  }

　　

　　

　　效果图：

转载于:https://www.cnblogs.com/helloluckworld/p/9597426.html