vis教程（加动画、加点击事件）

效果：

代码：

<template>
  <div>
    <i class="fa fa-building-o" style="visibility:hidden;"></i>
    <div class="visBox">
      <div id="mynetwork"></div>
      <div v-if="this.isTitle" class="visTitle">{{this.title}}</div>
    </div>
  </div>
</template>
<script>
const vis = require('vis-network/dist/vis-network.min.js')
require('vis-network/dist/dist/vis-network.min.css')
import 'font-awesome/css/font-awesome.min.css'
export default {
  data() {
    return {
      title: '',
      isTitle: false,
      list: [
        { id: 1, label: '华为投资控股有限公司' },
        { id: 2, label: '杭州华为企业通信技术有限公司' },
        { id: 3, label: '上海海思技术有限公司' },
        { id: 4, label: '华为软件技术有限公司' },
        { id: 5, label: '深圳市海思半导体有限公司' }
      ],
      nodes: null,
      edges: new vis.DataSet([
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 1, to: 4 },
        { from: 1, to: 5 }
      ]),
      color: ['#ef9a9a','#f8bbd0','#ce93d8','#b39ddb','#7986cb','#90caf9','#81d4fa']
    }
  },
  mounted() {
    var _this = this
    _this.nodes = new vis.DataSet(_this.list)
    var container = document.getElementById('mynetwork');
    var data = {
      nodes: this.nodes,
      edges: this.edges
    };
    var options = {
      autoResize: false, // 自动调整容器大小（无css下起作用）
      nodes: { // 节点
        borderWidth: 1, // 节点边框的宽度
        borderWidthSelected: 3, // 选中节点的边框宽度,未定义时为borderwidth*2
        chosen: { // 对选择及悬停做出反应
          node: function(values, id, selected, hovering) {
            values.color = 'red'
          },
        },
        color: {
          background: '#ef9a9a'
        },
        fixed: false, //节点不可以移动
        font: {
          color: '#333',
          size: 12,
          background: 'rgba(255,255,255,0.5)',
          align: 'left',
          // vadjust: 20, // 文字的垂直位置
        },
        // group: { //节点的归属组
        //   heightConstraint: 10, // 最小高度
        // },
        margin: 20,
        mass: 2, // 节点之间的排斥力
        shadow: {
          enabled: true, // 阴影
        },
        shape: 'icon', // 节点的外观
        size: 20,
        icon: {
          face: 'FontAwesome',
          code: '\uf1ad',
          weight: 5,
          size: 40,
          color:'#2B7CE9'
        },
      },
      edges: { // 边的配置项必须包含在名为“edges”的对象中
        arrows: { // 线条
          to: {
            enabled: true, // 打开或关闭箭头
            type: 'triangle', //箭头类型
          }
        },
        chosen: { // 对选择及悬停做出反应
          edge: function(values, id, selected, hovering) { // 线的变化
            values.color = 'red';
            values.width = 3
          },
          label: function(values, id, selected, hovering) { // 线上标签的变化
            values.color = 'red'
          },
        },
      },
      interaction: { // 交互
        hover: true,// 当鼠标移到节点上时，节点使用其悬停颜色
        hoverConnectedEdges: true,// 当鼠标悬停在节点上时，与其连接的边将以高亮（高亮色）显示
        zoomView: true // 允许用户缩放视图
      },
      // 布局
      layout: {
        randomSeed: 1, //配置每次生成的节点位置都一样
      },
      //物理引擎-计算节点之前斥力，进行自动排列的属性
      physics: {
        enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
      },
    };
    var network = new vis.Network(container, data, options);
    network.moveTo({
      scale: 0.8,
      position: {
        x:0,y:0
      },
      animation: true,
      // 动画持续时间
      // duration: 10000,
      // 动画类型
      easingFunction: 'easeeinoutquint'
    })
    network.on('click',function(properties){
      _this.isTitle = true
      _this.list.forEach(item => {
        if (item.id == properties.nodes[0]) {
          _this.title = item.label
        }
      })
    })
  }
}
</script>
<style scoped>
#mynetwork {
  width: 500px;
  height: 500px;
  border: 1px solid lightgray;
}
.visBox{
  width: 500px;
  height: 500px;
  position: relative;
}
.visTitle{
  position: absolute;
  top: 0;
  left: 0;
  background-color: antiquewhite;
  width: 230px;
  height: 50px;
  line-height: 50px;
}
</style>