vue中go.js的使用教学（一）

目录

1.安装go.js

2.引入go.js

3.出现的案例测试：

---

1.安装go.js

(如果报错：arg Argument starts with non-ascii dash, this is probably invalid: –save，请手动输入npm i gojs)

npm i gojs

2.引入go.js

这边是直接在使用的页面引入

import * as go from "gojs"

3.出现的案例测试：

粘贴即可实现出现一个测试页面，这是一个完整的vue文件代码。

<template>
    <div id="chart-wrap" style="height: 100%">
      <div id="chart-diagram" style="height: 100%"></div>
    </div>
</template>

<script>
import * as go from "gojs"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      myDiagram:null,
      myModel:null
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init() {
      var mySelf = this // 声明个Vue的指向
      const $=go.GraphObject.make
      mySelf.myDiagram = $(go.Diagram, 'chart-diagram', { // 创建画板并挂在Vue上（注意dom的id名称要对应）
        "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
        //这里写画板配置

      })
      mySelf.myDiagram.nodeTemplate =  // provide custom Node appearance
          $(go.Node, "Auto",
              $(go.Shape,
                  { figure: "RoundedRectangle",
                    fill: "white" },new go.Binding("fill", "color")),
              $(go.TextBlock,
                  new go.Binding("text","text"),{
                    margin: 5 })

          );
      let nodeDataArray = [
        {"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13,color:'red'},
        {"key":-1, "category":"End", "loc":"175 0", "text":"Start",color:'blue'},
        {"key":0, "loc":"0 0", "text":"Preheat oven to 375 F",color:'orange'},
        {"key":1, "loc":"100 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt",color:'orange'},
        {"key":2, "loc":"175 200", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour",color:'orange'},
        {"key":3, "loc":"175 290", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels",color:'orange'},
        {"key":4, "loc":"175 380", "text":"Press evenly into ungreased 15x10x1 pan",color:'orange'},
        {"key":5, "loc":"355 85", "text":"Finely chop 1/2 cup of your choice of nuts",color:'orange'},
        {"key":6, "loc":"175 450", "text":"Sprinkle nuts on top",color:'orange'},
        {"key":7, "loc":"175 515", "text":"Bake for 25 minutes and let cool",color:'orange'},
        {"key":8, "loc":"175 585", "text":"Cut into rectangular grid",color:'orange'},
        {"key":-2, "category":"End", "loc":"175 660", "text":"Enjoy!",color:'orange'}
      ];
      let linkDataArray = [
        {"from":1, "to":2, "fromPort":"B", "toPort":"T"},
        {"from":2, "to":3, "fromPort":"B", "toPort":"T"},
        {"from":3, "to":4, "fromPort":"B", "toPort":"T"},
        {"from":4, "to":6, "fromPort":"B", "toPort":"T"},
        {"from":6, "to":7, "fromPort":"B", "toPort":"T"},
        {"from":7, "to":8, "fromPort":"B", "toPort":"T"},
        {"from":8, "to":-2, "fromPort":"B", "toPort":"T"},
        {"from":-1, "to":0, "fromPort":"B", "toPort":"T"},
        {"from":-1, "to":1, "fromPort":"B", "toPort":"T"},
        {"from":-1, "to":5, "fromPort":"B", "toPort":"T"},
        {"from":5, "to":4, "fromPort":"B", "toPort":"T"},
        {"from":0, "to":4, "fromPort":"B", "toPort":"T"}
      ]
      mySelf.myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>