Web前端文档阅读笔记-vis.js在vue cli中的使用

程序运行截图如下：

首先要用npm导入的vis包

npm run vis

程序结构如下：

源码如下：

HelloWorld.vue

<template>
  <div id="networkDemo" style="width:800px; height: 600px">
  </div>

</template>

<script>

  import {createNode} from 'JS/visTest.js'
export default {

  name: 'HelloWorld',
  mounted(){
    this.init();
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {

    init(){
      createNode('networkDemo')
    }
  }
}
</script>

<style scoped>
</style>

visTest.js

import vis from 'vis'

export function createNode(idStr) {

  let nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'},
  ]);

  let edges = new vis.DataSet([
    {from: 1, to: 3, label: 'Hello'},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 3, to: 5}
  ])

  let container = document.getElementById(idStr);
  let data = {

    nodes: nodes,
    edges: edges
  };

  let options = {};
  let network = new vis.Network(container, data, options);
}