vue集成vis-network实现拓扑图

vis.js官方文档：https://visjs.org/
vis-network中文文档：https://ame.cool/pages/a7d858/

1. 环境准备

前提：电脑已安装配置npm和node.js

在vue项目中安装vis的命令：

npm install vis --save-dev

如果当前vue项目没有安装sass：

npm install sass-loader --save-dev
npm install node-sass --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}

然后在style标签里面加入lang=“scss”即可
2. 示例代码
（1）在组件中引入vis

import { DataSet, Network } from 'vis'

（2）定义dom

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

（3）容器渲染

<script>
  import { DataSet, Network } from 'vis'

  export default {
    name: 'Demo',
    data() {
      return {

      }
    },
    created() {
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        // // create an array with nodes
        var nodes = new 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' },
        ])
        // // create an array with edges
        var edges = new DataSet([
          { from: 1, to: 3 },
          { from: 1, to: 2 },
          { from: 2, to: 4 },
          { from: 2, to: 5 },
        ])
        // create a network
        var container = document.querySelector('#view_content')
        // provide the data in the vis format
        var data = {
          nodes: nodes,
          edges: edges,
        }
        var options = {
          //节点样式
          nodes: {
            shape: 'box', //设置节点node样式为矩形
            fixed: false, //节点node固定可移动
            font: {
              color: 'red', //字体的颜色
              size: 20, //显示字体大小
            },
            scaling: {
              min: 16,
              max: 32, //缩放效果比例
            },
          },
          //连接线的样式
          edges: {
            color: {
              color: 'rgb(97, 168, 224)',
              highlight: 'rgb(97, 168, 224)',
              hover: 'green',
              inherit: 'from',
              opacity: 1.0,
            },
            font: {
              align: 'top', //连接线文字位置
            },
            smooth: true, //是否显示方向箭头
            arrows: { to: true }, //箭头指向from节点
            // physics:false
          },
          layout: {
            //以分层方式定位节点
            hierarchical: {
              direction: 'LR', //分层排序方向
              sortMethod: 'directed', //分层排序方法
              levelSeparation: 400, //不同级别之间的距离
            },
          },
          interaction: {
            navigationButtons: true,
            // hover: true, //鼠标移过后加粗该节点和连接线
            selectConnectedEdges: false, //选择节点后是否显示连接线
          },
        }
        // initialize your network!
        this.network = new Network(container, data, options)
        // this.network.on('click', (e) => this.showDetail(e)) //单击事件
        // this.network.on('doubleClick', (e) => this.enterService(e)) //双击事件
        //生成图后才生成canvas元素，此处设置画布大小
        // let element = document.getElementsByTagName('canvas')[0]
        // element.height = '600'
      },
    },
  }
</script>

（4）自定义样式

<style lang="scss" scoped>
  .view_content {
    width: 800px;
    height: 600px;
    .vis-network {
      height: 500px;
    }
  }
</style>

3.效果展示