手把手教你使用vue创建第一个vis.js

最新推荐文章于 2024-05-10 09:47:40 发布

笑到世界都狼狈

最新推荐文章于 2024-05-10 09:47:40 发布

阅读量1.8k

点赞数 4

分类专栏： vis.js 文章标签： vie.js vue实现vis vue安装vis npm install vis vue导入vis

本文链接：https://blog.csdn.net/qq_36509946/article/details/129503820

版权

vis.js 专栏收录该内容

8 篇文章 9 订阅

订阅专栏

先看一下实现效果吧，如下图：

为什么要写这篇文章呢？因为之前有浅浅的了解一下vis.js，后期开发中没有使用vis，所以太深奥的也不懂，但是当时是用js写的。这两天有人问我用vue怎么写，然后说看到很多地方说npm，他连npm在哪输入都不知道。

那么下面这篇文章就超级啰唆的将一下npm install vis在哪输入，输入之后要怎么使用？？？

首先你总得需要有个vue项目吧，其次你有vue项目的话，你是不是还需要一个写代码的编辑器呀。

我正常使用的是webStrom,可在下图所示终端位置输入命令进行安装，安装完成后package.json中会有你安装的vis出现

npm install vis

当然，如果你使用的是vsCode,如下图所示打开终端输入npm安装，，，当然我这边vsCode没有拉项目进来，你肯定要拉自己的项目进来，在项目下npm。

在啰唆一点，如果你还是找不到终端，快捷键ctrl+shift+`打开终端。

好了，安装完了，接下来开始导入。有人问我导入在哪里导，我这个暴脾气一下子就上来了，当然是你哪里需要使用vis往哪个文件导啊。。。。

如果还不知道，那我就在啰唆一点，那你是不是有个vue文件准备把拓扑图放在这个文件写呀，那你肯定在这个文件导入呀。

接着问题又来了，那我这个导入写哪呢？我告诉你写在<script>下面，还专门截了图告诉你，但是如果你说script在哪？那真的是，，，，，我都不想暴脾气了，你自己悟吧。。。

import vis from 'vis'

导入完成过，要开始写页面标签了，也就是视图部分，用来控制你拓扑图在页面上的显示，

代码如下：你的拓扑图就显示在id为mynetwork的div中

<template>
  <div>
    <div id="mynetwork"></div>
  </div>
</template>

写完视图部分，当然要开始js部分咯，js都是照着官网复制粘贴的咯，代码如下：

<script>
import vis from 'vis'

export default {
  name: 'vis',
  data () {
    return {
      // 相当于原生js声明变量咯，下面声明的是节点和边(连线)的数据
      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' }
      ]),
      // from和to中的数字为nodes中的id,from: 1, to: 3 代表节点1和节点3直接有一条连线
      edges: new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 }
      ])
    }
  },
  mounted () {
    this.globalTrace() // 页面初始化的时候调用方法
  },
  methods: {
    /**
     * vis实现
     */
    globalTrace () {
      // 建立拓扑图
      var container = document.querySelector('#mynetwork')
      // 以vis格式提供数据
      var data = {
        nodes: this.nodes,
        edges: this.edges
      }
      var options = { // 对vis的一些设置

      }
      // 初始化你的网络
      this.network = new vis.Network(container, data, options)
    }
  }
}
</script>

这样整个完整的功能就实现了，不知道这样算不算手把手教学了。如果还不懂那我真的，，，，算了，在上一份从头到尾的完成代码吧。。

<template>
  <div>
    <div id="mynetwork"></div>
  </div>
</template>

<script>
import vis from 'vis'

export default {
  name: 'vis',
  data () {
    return {
      // 相当于原生js声明变量咯，下面声明的是节点和边(连线)的数据
      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' }
      ]),
      // from和to中的数字为nodes中的id,from: 1, to: 3 代表节点1和节点3直接有一条连线
      edges: new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 }
      ])
    }
  },
  mounted () {
    this.globalTrace() // 页面初始化的时候调用方法
  },
  methods: {
    /**
     * vis实现
     */
    globalTrace () {
      // 建立拓扑图
      var container = document.querySelector('#mynetwork')
      // 以vis格式提供数据
      var data = {
        nodes: this.nodes,
        edges: this.edges
      }
      var options = { // 对vis的一些设置

      }
      // 初始化你的网络
      this.network = new vis.Network(container, data, options)
    }
  }
}
</script>

<style scoped>
  #mynetwork {
    width: 600px;
    height: 400px;
    border: 1px solid lightgray;
  }
</style>

这样应该就懂了吧。。。