GOJS学习笔记 GOJS结合vue使用

gojs是什么？

GoJS是一个 JavaScript库，可让您在现代 Web 浏览器中轻松创建交互式图表。

GoJS支持图形模板和图形对象属性到模型数据的数据绑定。您只需要保存和恢复模型，该模型由简单的 JavaScript 对象组成，其中包含您的应用程序需要的任何属性。许多预定义的工具和命令实现了大多数图表所需的标准行为。外观和行为的自定义主要是设置属性的问题。

gojs使用的实例

 效果图：

<template>
  <div id="myDiagramDiv" style="width: 1000px; height: 1000px"></div>
</template>

<script>
import go from "gojs";
var $ = go.GraphObject.make;
export default {
  mounted() {
    var diagram = $(go.Diagram, "myDiagramDiv", {
      // layout: $(go.LayeredDigraphLayout),
      "animationManager.isEnabled": false,
    });
    // 在这里定义一个简单的node模板
    diagram.nodeTemplate = $(
      go.Node,
      "Auto", // 此选项是自动让文字适应文本块
      new go.Binding("location", "loc", go.Point.Parse).makeTwoWay(
        go.Point.Stringify
      ),
      $(
        go.Shape, // 基本的外形配置
        "RoundedRectangle",
        { strokeWidth: 0 }, //盒子边框的配置
        // 这是使用我们下边go.GraphLinksModel第一组数据定义的盒子对应的颜色
        new go.Binding("fill", "color")
      ),
      $(
        go.TextBlock,
        { margin: 8 }, // some room around the text
        // bind TextBlock.text to Node.data.key
        new go.Binding("text", "key")
      )
    );

    // the Model holds only the essential information describing the diagram
    diagram.model = new go.GraphLinksModel(
      [
        { key: "Alpha", color: "lightblue" },
        { key: "Beta", color: "orange" },
        { key: "Gamma", color: "lightgreen" },
        { key: "Delta", color: "pink" },
      ],
      [
        { from: "Alpha", to: "Beta" },
        { from: "Alpha", to: "Gamma" },
        { from: "Beta", to: "Beta" },
        { from: "Gamma", to: "Delta" },
        { from: "Delta", to: "Alpha" },
      ]
    );

    // enable Ctrl-Z to undo and Ctrl-Y to redo
    diagram.undoManager.isEnabled = true;
  },
};
</script>