GoJS 在 Vue 中的简单实现

GoJS 在 Vue 中的简单实现

介绍与引入

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

在 vue 中使用

1. 安装：

npm install gojs --save 

2. 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.makevar myDiagram = $(go.Diagram, "flowChart",  // 获取节点{"undoManager.isEnabled": true // 设置开启 Ctrl-Z 撤消，Ctrl-Y 重做})  
} 

效果示例：

2. 在图像中添加节点

• 行为部分（script）

// 初始化
init(){var $ = go.GraphObject.makevar myDiagram = $(go.Diagram, "flowChart")  // 获取节点var myModel = $(go.Model)myModel.nodeDataArray = [{ key: "东方月初" },{ key: "王权富贵" },{ key: "涂山红红" }]myDiagram.model = myModel
} 

效果示例：

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

• 行为部分（script）

// 初始化
init(){var $ = go.GraphObject.makevar 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
} 

效果示例：