vue 使用gojs繪製簡單的流程圖

時間 2019-12-14

原文原文鏈接

在vue項目中須要展現工做流進度,能夠使用的流程圖插件不少javascript

flowchart.js http://adrai.github.io/flowchart.js/ , 基於SVG建立Flow Charthtml
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各類交互式圖表的建立。有免費版和收費版vue
joint.js http://www.jointjs.com/ joint.js 是另外一個建立圖標庫的工具，也提供免費版和商業版html5
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖建立工具，小巧精悍，使用簡單java
d3 http://d3js.org 在html5領域，d3可謂是最好的可視化基礎庫，提供方面的DOM操做，很是強大node

最終選用了gojs，API文檔介紹的很細緻，在vue項目中使用也比較方便，一下只是哥簡單的學習示例。git

　　API文檔地址：https://gojs.net/latest/intro/sizedGroups.htmlgithub

1、引入gojsnpm

npm install gojs --save

import go from'gojs'//引入gojs

2、開始使用app

　　在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;
    
  }

　　效果圖：