gojs 在vue中简单使用

先推荐一篇文章http://www.cnblogs.com/Renyi-Fan/p/9995718.html

栗子1效果图可折叠的 family tree：此例是单纯的HTML格式，代码复制粘贴就会出效果

同上需要先定义DOM

JS

window.onload=function(){
  init();
}

function init() {
  var gm = go.GraphObject.make;//构建GoJs绘制图表的基类
  myDiagram = gm(
    go.Diagram, "myDiagramDiv",//Dom容器的Id
    { initialContentAlignment: go.Spot.Center,//控制图表内容的初始大小和位置
      "draggingTool.dragsTree": true,//允许拖拽
      layout:gm(go.TreeLayout,
        { angle: 90 })//树状结构的角度
    }
  );
 
  myDiagram.nodeTemplate = gm(
    go.Node, "Vertical",//节点展开方向为竖向展开 
    { selectionObjectName: "BODY", deletable: false },
    gm(go.Panel, "Auto",
      { name: "BODY" },
      gm(go.Shape, "Rectangle",//创建矩形容器容器样式
        {stroke: null},
          new go.Binding("fill", "gender", genderBrushConverter)
             //样式来自之前定义的bluegrad对象,无特殊标示(高亮，选中)
      ),
      gm(go.TextBlock,
        { font: "700 12px Droid Serif, sans-serif",
          textAlign: "center",
          margin: 10, maxSize: new go.Size(80, NaN) },
          new go.Binding("text", "name")
      ),
      gm(go.Panel, "Vertical",
        { margin: 3 },//矩形容器内边距
        gm(go.TextBlock,
          { stretch: go.GraphObject.Horizontal,
          font: "bold 12pt Verdana, sans-serif"},//标题字体样式
          new go.Binding("text", "question")//为标题文字绑定数据question字段
        ),
        // 可选动作列表
        gm(go.Panel, "Vertical",
          // 除非有多个动作，否则不可见
          { stretch: go.GraphObject.Horizontal, visible: false },//当无子节点时，不可见
          new go.Binding("visible", "answer", function(acts) {
            return (Array.isArray(acts) && acts.length > 0);
          }),//将答案数组(数据中的子节点数组)绑定在矩形区域内
          // 由表中的标签和PanelExpanderButton标头
          gm(go.Panel, "Table",
            { stretch: go.GraphObject.Horizontal },
            gm(go.TextBlock, "选项",
              { alignment: go.Spot.Left,
              font: "12pt Verdana, sans-serif"}
            ),
            gm("PanelExpanderButton", "COLLAPSIBLE",  // 使可见或不可见的对象的名称
              { column: 1, alignment: go.Spot.Right }
            )//下拉折叠按钮
          ),
          gm(go.Panel, "Vertical",//第二个子矩形区域(存放答案(数据总的子节点数组))
            { name: "COLLAPSIBLE",  // 识别PanelExpander按钮
              padding: 2,
              stretch: go.GraphObject.Horizontal,  // 占用全部可用宽度
              background: "white",  // 与节点主体区分颜色
              defaultAlignment: go.Spot.Left 
              //将上文的actionTemplate对象中设置的数据与样式  赋值到 数组中每个子节点
            },
            new go.Binding("itemArray", "answer")  // 将itemArray绑定到nodedata.actions
          )
        ) 
      )  
    ),  
    gm(go.Panel, 
      { height: 15 },  
      gm("TreeExpanderButton")
    )//子节点展开/收起按钮 通常高度为15
  );

  myDiagram.linkTemplate = gm(
    go.Link, go.Link.Orthogonal,
    { deletable: false, corner: 10 },//连线圆角角度
    gm(go.Shape,
      { strokeWidth: 2 }  //线条宽度
    ),
    gm(go.TextBlock, go.Link.OrientUpright,
      { background: "blue",   //线条选中后颜色
        visible: false, // 当节点间无联系，则不显示连线
        segmentIndex: -2,
        segmentOrientation: go.Link.None
      },
      new go.Binding("text", "answer"),
      // 如果answer字段未定义，则设置节点不可见
      new go.Binding("visible", "answer", function(a) { return (a ? true : false); })
    )
  ); 

  var nodeDataArray = [
  // key 所在位置，gender 颜色，
    { key: 0, name: "George V", gender: "M"},
      { key: 1, parent: 0, name: "Edward VIII", gender: "M"},
      { key: 2, parent: 0, name: "George VI", gender: "M"},
        { key: 7, parent: 2, name: "Elizabeth II", gender: "F"},
          { key: 16, parent: 7, name: "Charles, Prince of Wales", gender: "M"},
            { key: 38, parent: 16, name: "Prince William", gender: "M"},
            { key: 39, parent: 16, name: "Prince Harry of Wales", gender: "M"},
          { key: 17, parent: 7, name: "Anne, Princess Royal", gender: "F"},
            { key: 40, parent: 17, name: "Peter Phillips", gender: "M"},
            { key: 41, parent: 17, name: "Zara Phillips", gender: "F"},
          { key: 18, parent: 7, name: "Prince Andrew", gender: "M"},
            { key: 42, parent: 18, name: "Princess Beatrice of York", gender: "F"},
            { key: 43, parent: 18, name: "Princess Eugenie of York", gender: "F"}
  ];
  // 创建family tree模型
  myDiagram.model = new go.TreeModel(nodeDataArray);

}
// 颜色
function genderBrushConverter(gender) {
  if (gender === "F") return '#90CAF9';
  if (gender === "M") return '#F48FB1';
  return "orange";
}

栗子2效果图：

 代码：

需要先设定好固定的DOM

在main.js中引入gojs

import './util/go.js';

JS

// 需要先定义全局变量，不然会报错
let go = window.go;
let gm = go.GraphObject.make; //定义模版，这里官网用的$太敏感，被我替换掉了
export default {
  data () {
    return {
      diagramData:[] //后台的数据
    }
  },
  mounted (){
    // 创建页面加载创建图表，不可以加在事件中，因为一个dom只可以画一个图
    this.myDiagram = gm(go.Diagram, 
      this.$refs.myDiagramDiv, //gojs中可以直接取到id名（如‘id’）vue中不可以，所以用refs来取dom
      {initialContentAlignment: go.Spot.Center,}); // 图表居中显示
    var graygrad = gm(go.Brush, "Linear", { 0: "#F5F5F5", 1: "#F1F1F1" }); // 定义图表格式刷
    // 定义节点模版
    this.myDiagram.nodeTemplate = gm(
      go.Node, "Auto",
      { isShadowed: true }, // 是否投影
      // 定义节点的外部形状
      gm(go.Shape, "RoundedRectangle", // 形状为圆角矩形
        { fill: graygrad, stroke: "#D8D8D8"},
        new go.Binding("fill", "color")),
      // 定义节点的文本
      gm(go.TextBlock,
        { margin: 10,height:40, font: "bold 11px Helvetica, bold Arial, sans-serif" },
        new go.Binding("text", "key")),
      gm(go.Panel,
        { defaultAlignment: go.Spot.TopLeft, //位置
          margin:10,
        },
        new go.Binding("itemArray", "reasonsList")// 汉字说明
      )
    );
    // 连接线样式
    this.myDiagram.linkTemplate = gm(
      go.Link,
      { routing: go.Link.Orthogonal, corner: 5 },
      gm(go.Shape, { strokeWidth: 3, stroke: "#555" })
    ); 
    
  },
  methods: {
    //init方法需要在加在图表前的事件中调用
    init() {
      // 从服务器请求JSON格式的文本数据
      let url = '';
      this.$http.get(url).then(function(response){
        if(response.status === 200){
          this.diagramData = response.data
          // 为双树创建模型
          this.myDiagram.model = new go.TreeModel(this.diagramData); //把数据放入图表中
          this.doubleTreeLayout(this.myDiagram);
        }
      },function(){
        this.$Message.error('数据获取失败,请检查接口是否正常!');
      })
    },

  doubleTreeLayout(diagram) {

    // 根据方向，将节点和链接分成两组
    var leftParts = new go.Set(/*go.Part*/);
    var rightParts = new go.Set(/*go.Part*/);
    this.separatePartsByLayout(diagram, leftParts, rightParts);
    // 但是ROOT节点将在两个集合中

    //创建并执行两个TreeLayout，每个方向一个，

    //在不移动ROOT节点的情况下，在节点和链接的不同子集上
    var layout1 =
      gm(go.TreeLayout,
        { angle: 180,// 距离root的左侧距离
          arrangement: go.TreeLayout.ArrangementFixedRoots,// 布置单独的树，必选
          setsPortSpot: false });

    var layout2 =
      gm(go.TreeLayout,
        { angle: 0,// 距离root的右侧距离
          arrangement: go.TreeLayout.ArrangementFixedRoots,
          setsPortSpot: false });

    layout1.doLayout(leftParts);
    layout2.doLayout(rightParts);

    diagram.commitTransaction("Double Tree Layout");
  },
  separatePartsByLayout(diagram, leftParts, rightParts) {
    var root = diagram.findNodeForKey(this.ipData); // 获取中心点
    if (root === null) return;
    // ROOT节点由两个子树共享
    leftParts.add(root);
    rightParts.add(root);
    // 查看ROOT节点的所有直接子节点
    root.findTreeChildrenNodes().each(function(child) {
      // 这个节点在哪个方向延长
      var dir = child.data.dir;
      var coll = (dir === "left") ? leftParts : rightParts;
      // 从此子节点开始添加整个子树
      coll.addAll(child.findTreeParts());
      // 还添加了从ROOT节点到该子节点的链接
      coll.add(child.findTreeParentLink());
    });
  }
}

后台的数据格式：

[
  {
    "color": "#A570AD",
    "reasonsList": [
      {
        "text": "运维信息管理系统数据库"
      }
    ],
    "key": "10.96.140.136"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "互联通spring cloud zookeeper"
      }
    ],
    "dir": "right",
    "key": "10.100.17.189"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "111互联通spring cloud"
      }
    ],
    "dir": "right",
    "key": "10.100.17.174"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "运维信息管理系统"
      }
    ],
    "dir": "left",
    "key": "10.96.140.117"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "运维ITSM系统"
      }
    ],
    "dir": "left",
    "key": "10.96.140.126"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "电信通spring cloud"
      }
    ],
    "dir": "left",
    "key": "10.100.136.117"
  },
  {
    "parent": "10.96.140.136",
    "reasonsList": [
      {
        "text": "zookeeper配置中心测试"
      }
    ],
    "dir": "left",
    "key": "10.96.140.71"
  }
]