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

Posted 2022-08-27 IT1995

程序运行截图如下：

首先要用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);