vue使用Vis.Network制作图谱

首先要加载vis

npm install vis --save

需要使用的组件中引入

import Vis from "vis";

初始化图谱

    

data() {
	return {
		nodesArray: [],  //节点数组
		edgesArray: []  //关系线数组
	}
},
mounted() {
      // 初始化
      let container = document.getElementById("network_id");
       let data = { nodes: this.nodesArray, edges: this.edgesArray }
       let options = {
          autoResize: true, //网络将自动检测其容器的大小调整，并相应地重绘自身
          locale: "cn", //语言设置：工具栏显示中文
          // 设置节点样式
          nodes: {
            shape: "dot", //节点的外观。为circle时label显示在节点内，为dot时label显示在节点下方
            margin: 5, //当形状设置为box、circle、database、icon、text；label的边距
            widthConstraint: 100, //设置数字，将节点的最小和最大宽度设为该值,当值设为很小的时候，label会换行，节点会保持一个最小值，里边的内容会换行
            borderWidth: 1, //节点边框宽度，单位为px
            borderWidthSelected: 3, //节点被选中时边框的宽度，单位为px
            labelHighlightBold: false, //确定选择节点时标签是否变为粗体
          },
          // 边线配置
          edges: {
            width: 1,
            length: 200,
            arrows: { to: true }, //箭头指向to
          },
          interaction: {
            hover: true,
            hoverConnectedEdges: true
          },
          //计算节点之前斥力，进行自动排列的属性
          physics: {
            enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
            maxVelocity: 20,
            minVelocity: 0.1
          }
        };
      let network = new Vis.Network(container, data, options);
    },

完整代码