GoJS 在 Vue 中的简单实现

介绍与引入

简述： GoJS 是一个用于实现交互式图表的 JavaScript 库

在 vue 中使用

安装：

npm install gojs --save

gojs

import gojs from 'gojs'  // 在 main.js 中引入
Vue.prototype.go = gojs  // 挂载

1. 创建一个空图像

结构部分（template）

<div class="flowChart" id="flowChart"></div>  // 准备节点

样式部分（css）

.flowChart {
    width: 800px;
    height: 400px;
    margin: 10% auto;
    background-color: rgb(236, 236, 236);
}

行为部分（script）

// 初始化
init(){
    var $ = go.GraphObject.make
    var myDiagram = $(go.Diagram, "flowChart",  // 获取节点
        {
            "undoManager.isEnabled": true // 设置开启 Ctrl-Z 撤消，Ctrl-Y 重做
        }
    )  
}

效果示例：

2. 在图像中添加节点

行为部分（script）

// 初始化
init(){
    var $ = go.GraphObject.make
    var myDiagram = $(go.Diagram, "flowChart")  // 获取节点
    
    var myModel = $(go.Model)

    myModel.nodeDataArray = [
        { key: "东方月初" },
        { key: "王权富贵" },
        { key: "涂山红红" }
    ]

    myDiagram.model = myModel
}

效果示例：在这里插入图片描述

通过创建由 GraphObjects 组成的模板，创建一个节点，我们可以使用几个构建块类： ● 形状：用于显示带有颜色的预定义或自定义几何图形； ● 文本块：以各种字体显示（可能可编辑）文本； ● 图片：用于显示图像； ● 面板：用于容纳其他对象的集合的容器，这些对象可以根据面板的类型以不同的方式定位和调整大小（如桌子、垂直堆叠和拉伸容器）；

行为部分（script）

// 初始化
init(){
    var $ = go.GraphObject.make
    var myDiagram = $(go.Diagram, "flowChart")  // 获取节点
    
    myDiagram.nodeTemplate = $(  
        go.Node,
        'Horizontal',  // 设置位置 - 水平居中
        { background: "#44CCFF" }, // 设置模板样式
        $(go.TextBlock,
            'Horizontal',
            { font : 'bold 16px sans-serif' },
            new go.Binding("text", "key")              
        ),
    )
    
    var myModel = $(go.Model)

    myModel.nodeDataArray = [
        { key: "东方月初" },
        { key: "王权富贵" },
        { key: "涂山红红" }
    ]

    myDiagram.model = myModel
}

效果示例：