Gojs初探

1. 先引入gojs，npm i ui-go --save,或者CDN引入页面
2. Gojs跟Canvas一样都需要dom来渲染

<div id="myGo" style="width: 500px;height: 500px;"></div>

3. 定义画笔

const g = go.GraphObject.make;

4. 设置全局配置

const myGo = g(go.Diagram,'myGo',{
	isReadOnly: true, //设置为false或者不设置改参数时，模块可以拖动
	isEnabled: false, // 设置用户是否能与之交互
}) // 参数1：为模板，参数2：id 或者该元素，参数3：为该模板其他属性

5. 定义模板数据

// 节点数据
const nodes = [
	{
    	key: 'test', // 唯一标识用来链接节点
        text: '测试'
    },
    {
    	key: 'test2', // 唯一标识用来链接节点
        text: '其他'
    }
]
// 连线数据
const links = [
	{
    	from: 'test',
        to: 'test2'
    }
]

6. 设置节点，连线关系

const myModel = g(go.GraphLinksModel);
myModel.nodeDataArray = vm.node;
myModel.linkDataArray = vm.link;

7. 赋值

myGo.model = myModel;

这样一个简单的gojs示例就绘制完成。