GOJS学习笔记：基础使用-lesson1```js vue安装gojs： npm install gojs --sav

vue安装gojs：
    npm install gojs --save
main.js引入：
    import gojs from 'gojs' 
vue文件中定义div
    <div id="myDiagramDiv" style="width:600px; height:550px; background-color: #DAE4E4;"></div>
mounted(){
    this.goIntro()
},
methods:{
    goIntro(){
        var $=go.GraphObject.make
        var diagram=new go.Diagram('myDiagramDiv')
        diagram.initialContentAlignment=go.Spot.Center //设置图标对齐
        //定义节点模板
        diagram.nodeTemplate=
            $(go.Node,go.Panel.Auto,
                $(go.Shape,
                    {figure:"RoundedRectangle"},
                    new go.Binding('fill','color')
                ),
                $(go.TextBlock,
                    {margin:3},
                    new go.Binding('text','key')
                )
            )

        //定义节点数据
        var nodeDataArray=[
            {key:'Alpha',color:'LightBlue'},
            {key:'Beta',color:'Orange'},
            {key:'GAMMA',color:'LightGreen'},
            {key:'DELTA',color:'Pink'},
        ]
        //定义连接
        var linkDataArray=[
            {from:'Alpha',to:'Beta'},
            {from:'Alpha',to:'GAMMA'},
            {from:'Beta',to:'Beta'},
            {from:'GAMMA',to:'DELTA'},
            {from:'DELTA',to:'Alpha'},
        ]
        //模型描述，将其映射到数据并创建节点和连接
        diagram.model=new go.GraphLinksModel(nodeDataArray,linkDataArray)

    }
},

效果图：

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d94e218e54f4dfeb959ad1fee6a31cc~tplv-k3u1fbpfcp-watermark.image?)