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);
}