vue使用Vis.Network制作图谱_vis-network-优快云博客

本文链接：https://blog.youkuaiyun.com/zy158982045727/article/details/124844967

本文介绍如何在Vue.js应用中利用Vis.Network库来构建动态和交互式的图谱。通过结合Vue的数据绑定特性，我们可以轻松地更新图谱数据，并实现节点和边的动态添加、删除和修改。Vis.Network提供了丰富的配置选项和事件处理，使得在前端展示复杂关系数据变得直观且易于操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


//首先要加载VIS
npm install vis --save

//在main.js中引入配置项
import "vis/dist/vis.css"

//在使用的页面引入该组件
import Vis from "vis";

//在template中的部分
<!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
    <div id="network_id" class="network" style="height: 500px;"></div>

//在script中的部分
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);
    },


//以下为完整代码与点边设置
<template>
  <div class="Vis">
    <!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
    <div id="network_id" class="network" style="height: 500px;"></div>
    <!--节点悬停-->
    <div class="menu" id="divHoverNode" style="display:none;"></div>
  </div>
</template>
<script>
  import Vis from "vis";
  export default {
    data() {
      return {
        //   节点数组
        nodesArray: [
          {
            "type": "Project",
            "label": "kernel_git_pcmoore_selinux",
            "id": 3559072,
            "releaseTime": "2006-08-22 12:00:00",
            "licenses": [
              "GPL-2.0",
              "GPL"
            ],
            "copyrights": [
              {
                "context": "Copyright (C) 1989, 1991 Free Software Foundation, Inc.",
                "time": "1989, 1991",
                "author": "Free Software Foundation, Inc.",
                "integrity": 3
              },
              {
                "context": "copyrighted