GOJS 基础用法

一. 应用效果

两个实例代码 放在最下面

1. 实例一

2. 实例二

官方文档： Production Process Viewer

中文文档： GoJS 图形组件简介 | GoJS

二. 基础用法

1. 安装依赖

如果想去掉 左上角水印  可以下载 2.1.48 版本 网上去除这个版本水印的方法比较多

npm i gojs -S

2. 引入

import go from 'gojs' //在export default前

 3. 创建画布

他类似于 echarts 需要一个盒子装载

 <div class="inCharts" id="myDiagramDiv">
div>

4. 挂载

var myDiagram = $(go.Diagram, "myDiagramDiv",//为DIV.HTML元素创建一个画布
    {
        //设置画布配置
        initialAutoScale: go.Diagram.Uniform,  // 缩放以显示所有内容
        maxSelectionCount: 1,  // 不要让用户一次选择多于一个的东西
        isReadOnly: true, // 只读  不可拖动
        contentAlignment: go.Spot.Center, // 位置在中间
        // layout: $(go.TreeLayout,
        //     { angle: 90, layerSpacing: 35 })
    });

5. 修改连线样式

比方做成官网这种动态线

​

  myDiagram.linkTemplate =
        $(go.Link,
            {
                layerName: "Background",
                routing: go.Link.Orthogonal,
                corner: 15,
                reshapable: true,
                resegmentable: true,
            },
            $(go.Shape, new go.Binding("stroke", "color"), { isPanelMain: true, strokeWidth: 10 }),
            $(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [20, 40] })
        );

var opacity = 1;
    var down = true;
    function loop() {
        var diagram = myDiagram;
        setTimeout(() => {
            var oldskips = diagram.skipsUndoManager;
            diagram.skipsUndoManager = true;
            diagram.links.each(link => {
                var shape = link.findObject("PIPE");
                var off = shape.strokeDashOffset - 3;
                // animate (move) the stroke dash
                shape.strokeDashOffset = (off <= 0) ? 60 : off;
                // animte (strobe) the opacity:
                if (down) opacity = opacity - 0.01;
                else opacity = opacity + 0.003;
                if (opacity <= 0) { down = !down; opacity = 0; }
                if (opacity > 1) { down = !down; opacity = 1; }
                shape.opacity = opacity;
            });
            diagram.skipsUndoManager = oldskips;
            loop();
        }, 60);
    }
loop()

6. 添加节点

myDiagram.nodeTemplate = $(go.Node, "auto",)

$(go.Panel,) // 相当于一个div
$(go.Picture,) // 图片
$(go.TextBlock) // 文本
$("Button") // 按钮

7.  插槽

每个节点下方的内容会不同  这个时候就出现了节点这个概念

var itemtemplates = new go.Map()
// 如果状态为pic 则新增一个图片
itemtemplates.add("pic",
    $(go.Panel,
        $(go.Picture,
            { margin: 10, width: 30, height: 30, background: 'transparent' },
            new go.Binding("source")))
);
// 如果状态为text  则新增一个文本
itemtemplates.add("text",
    $(go.Panel,
        $(go.TextBlock,
            new go.Binding("text"))
    ));

数据

diagram.model = new go.GraphLinksModel( [
    { key: "Alpha",
      info: [
              { type: "text", text: "some text" },
              { type: "button", text: "Click me!", handler: "alert"}
            ]
    },
    { key: "Beta",
      info: [
              { type: "text", text: "first line" },
              { type: "button", text: "First Button", handler: "alert"},
              { type: "text", text: "second line" },
              { type: "button", text: "Second Button", handler: "alert" }
            ]
    }
  ],[
    { from: "Alpha", to: "Beta" }
  ]);

8. 组

diagram.model.nodeDataArray = [
    { key: "Alpha", isGroup: true },
    { key: "Beta", group: "Alpha" },
    { key: "Gamma", group: "Alpha", isGroup: true },
    { key: "Delta", group: "Gamma" },
    { key: "Epsilon", group: "Gamma" },
    { key: "Zeta", group: "Alpha" },
    { key: "Eta", group: "Alpha", isGroup: true},
    { key: "Theta", group: "Eta" }
  ];

组样式  当在数据中  这行数据设置了 isGroup: true 则他使用的样式为下方

diagram.groupTemplate =
    $(go.Group, "Vertical",
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",  // 围绕着占位符Placeholder
          { parameter1: 14,
            fill: "rgba(128,128,128,0.33)" }),
        $(go.Placeholder,    //占位符,表示所有构件的面积，
          { padding: 5})  // 添加内边距
      ),
      $(go.TextBlock,         // group title
        { alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" },
        new go.Binding("text", "key"))
    );

三. 实例代码

1.实例一

2. 实例二