Vue项目实战用vis.js打造动态社交网络关系图附完整代码最近在做一个社区用户分析的后台项目产品经理指着原型图上的一个复杂网状图问我“这个关系图能做成动态的、可以拖拽、还能高亮显示不同群组吗” 我看了看需求脑子里第一个蹦出来的就是vis.js的 Network 模块。这东西在关系可视化领域算是个“老炮儿”了功能强大到有点“过剩”但用好了效果绝对惊艳。如果你也在用 Vue 技术栈并且需要在前端展示诸如社交关系、知识图谱、设备拓扑、组织架构这类网状数据那么这篇文章就是为你准备的。我不会只给你一个“Hello World”式的demo而是会带你从零开始搭建一个功能完备、交互丰富的动态关系图并分享我在实际项目中踩过的坑和优化技巧。你会发现把一堆枯燥的 JSON 数据变成一幅生动、可探索的视觉图谱其实并没有想象中那么复杂。1. 项目初始化与环境搭建在开始写代码之前我们得先把舞台搭好。使用 Vue 3 的 Composition API 配合 Vite 来构建项目是目前最主流、开发体验也最好的选择。当然如果你还在维护 Vue 2 的项目大部分核心逻辑也是相通的只是写法上有些差异。首先创建一个新的 Vue 项目。打开终端执行以下命令npm create vuelatest vue-vis-network-demo按照提示选择需要的配置这里我们只需要TypeScript和Vue Router即可其他的按需选择或直接回车跳过。项目创建完成后进入目录并安装 vis.jscd vue-vis-network-demo npm install visvis.js 是一个功能庞大的库我们只需要其中的network模块以及其样式。为了优化打包体积我们可以按需引入。在main.ts或main.js中我们只需要引入其核心的 CSS 文件// main.ts import { createApp } from vue import App from ./App.vue import vis-network/styles/vis-network.css // 引入核心样式 createApp(App).mount(#app)注意vis.js 的样式文件路径在较新版本中可能有所变化。如果上述路径报错可以尝试import vis/dist/vis.css具体请参考你安装的 vis.js 版本的文档。接下来我们创建一个专门的组件来承载我们的关系图。在components目录下新建NetworkGraph.vue文件。这个组件将是我们所有逻辑的核心。2. 核心数据结构与图形初始化关系图的核心无非是两样东西节点和边。在 vis.js 的世界里它们被抽象为nodes和edges两个数据集。我们的首要任务就是定义好它们的数据结构并让画布成功渲染出来。2.1 定义节点与边的类型使用 TypeScript 能极大提升开发效率和代码可维护性。我们先定义一下节点和边的接口// 在 NetworkGraph.vue 的 script setup 顶部或单独的类型文件中 interface NetworkNode { id: string | number // 唯一标识必须 label?: string // 显示的文字 group?: string // 分组用于样式区分比如‘用户’、‘话题’、‘设备’ title?: string // 鼠标悬停提示 // 其他 vis.js 支持的节点属性如 shape, color, size 等 [key: string]: any } interface NetworkEdge { id?: string | number // 唯一标识可选但建议提供 from: string | number // 起始节点 id to: string | number // 目标节点 id label?: string // 连线上的文字 arrows?: to | from | middle | to;from // 箭头方向 // 其他 vis.js 支持的边属性如 width, color, dashes 等 [key: string]: any }2.2 初始化网络图实例现在我们在NetworkGraph.vue组件中使用ref来创建响应式数据和图形实例。vis.js的Network类是核心它接受一个容器 DOM 元素、数据对象和配置项。template div classnetwork-container !-- 画布容器必须指定宽高 -- div refnetworkContainer classnetwork-canvas/div /div /template script setup langts import { ref, onMounted, onUnmounted } from vue import { DataSet, Network } from vis-network // 获取 DOM 容器引用 const networkContainer refHTMLElement() // 创建响应式数据集 const nodes ref(new DataSetNetworkNode([])) const edges ref(new DataSetNetworkEdge([])) // Network 实例引用 let networkInstance: Network | null null // 模拟一些初始数据 const mockData { nodes: [ { id: 1, label: Alice, group: user, title: 核心用户活跃度高 }, { id: 2, label: Bob, group: user }, { id: 3, label: Carol, group: user }, { id: 4, label: Vue.js, group: topic, shape: diamond }, { id: 5, label: React, group: topic, shape: diamond }, ], edges: [ { from: 1, to: 4, label: 关注, color: #7bed9f }, { from: 2, to: 4, label: 讨论 }, { from: 3, to: 5, label: 关注 }, { from: 1, to: 2, label: 好友 }, { from: 2, to: 3, label: 同事 }, ] } // 初始化网络图的函数 const initNetwork () { if (!networkContainer.value) return // 1. 清空或初始化数据集 nodes.value.clear() edges.value.clear() nodes.value.add(mockData.nodes) edges.value.add(mockData.edges) // 2. 准备数据对象 const data { nodes: nodes.value, edges: edges.value } // 3. 配置选项先使用一个基础配置 const options { autoResize: true, height: 100%, width: 100%, interaction: { hover: true }, physics: { enabled: true } // 开启物理引擎让节点自动布局 } // 4. 创建网络图实例 networkInstance new Network(networkContainer.value, data, options) } // 组件挂载时初始化 onMounted(() { initNetwork() }) // 组件销毁时清理实例避免内存泄漏 onUnmounted(() { if (networkInstance) { networkInstance.destroy() networkInstance null } }) /script style scoped .network-container { width: 100%; height: 600px; /* 给容器一个明确的高度 */ border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; } .network-canvas { width: 100%; height: 100%; } /style现在运行项目 (npm run dev)你应该能看到一个基础的关系图了。节点会自动散开你可以用鼠标拖拽画布或节点用滚轮缩放。但这只是个开始它的样子还比较简陋。3. 深度定制让关系图“活”起来一个专业的关系图绝不仅仅是把点和线画出来。我们需要通过丰富的配置来传达更多的信息层次和业务逻辑。3.1 分组与视觉编码group属性是我们区分节点类型的关键。我们可以为不同的group定义完全不同的样式。// 在 initNetwork 函数的 options 配置中添加 groups 和 nodes 的详细配置 const options { // ... 其他基础配置 groups: { user: { shape: dot, // 圆形节点 size: 25, color: { background: #3498db, // 主背景色 border: #2980b9, highlight: { background: #1abc9c, border: #16a085 }, // 选中/高亮色 hover: { background: #5dade2, border: #3498db } // 悬停色 }, font: { color: #fff, size: 14, face: Arial } }, topic: { shape: diamond, // 菱形节点 size: 30, color: { background: #e74c3c, border: #c0392b, highlight: { background: #f1948a, border: #e74c3c }, hover: { background: #ec7063, border: #e74c3c } }, font: { color: #fff, size: 14, face: Arial, bold: true } }, // 你可以继续添加更多分组如 group, device 等 }, nodes: { // 这里是所有节点的全局默认样式groups 中的设置会覆盖这里的同名属性 shape: ellipse, borderWidth: 2, shadow: true, // 给节点一点阴影增加立体感 font: { size: 16, face: Tahoma, align: center, vadjust: 0, // 垂直调整 multi: false, // 是否支持多行文本 bold: { color: #343434, size: 16, vadjust: 0, mod: bold } }, scaling: { min: 10, max: 30, label: { // 节点标签是否随缩放而变化 enabled: true, min: 14, max: 30, drawThreshold: 9 // 缩放级别低于此值时隐藏标签 } } } }3.2 连线的艺术边是关系的直接体现其样式同样重要。我们可以根据关系的类型、强度来定义不同的颜色、粗细和样式。const options { // ... 其他配置 edges: { width: 2, // 基础宽度 color: { color: #95a5a6, // 默认颜色 highlight: #f1c40f, // 高亮颜色 hover: #f39c12, inherit: from, // 颜色继承自源节点可以设置为 to 或 false opacity: 0.8 }, smooth: { type: dynamic, // 连线的平滑类型。dynamic 是动态的贝塞尔曲线效果最好 roundness: 0.5 // 曲率 }, arrows: { to: { // 指向目标节点的箭头 enabled: true, scaleFactor: 0.8 // 箭头大小 } // 也可以配置 middle, from }, font: { color: #34495e, size: 12, face: Tahoma, align: horizontal, background: rgba(255, 255, 255, 0.7), // 标签背景色增加可读性 strokeWidth: 2, strokeColor: rgba(255, 255, 255, 0.8) }, selectionWidth: function (width) { return width * 2; }, // 选中时边线变粗 hoverWidth: function (width) { return width * 1.5; } // 悬停时边线变粗 } }3.3 布局与物理引擎找到最美观的样子vis.js 内置的物理引擎能自动计算节点间的斥力和引力让图形自动达到一个平衡、美观的布局。这是它的一大亮点。const options { // ... 其他配置 physics: { enabled: true, // 总开关 solver: forceAtlas2Based, // 布局算法forceAtlas2Based 适合大多数网络图 forceAtlas2Based: { gravitationalConstant: -50, // 引力常数负值代表斥力让节点分开 centralGravity: 0.01, // 中心引力防止节点飞散 springLength: 100, // 弹簧边的理想长度 springConstant: 0.08, // 弹簧强度 damping: 0.4, // 阻尼模拟阻力值越大运动越慢 avoidOverlap: 1 // 避免重叠1为完全避免 }, stabilization: { // 稳定化设置布局计算迭代 enabled: true, iterations: 1000, // 迭代次数越多布局越稳定 updateInterval: 100, onlyDynamicEdges: false, fit: true // 稳定后自动适配视图 }, timestep: 0.5, // 物理模拟的时间步长 adaptiveTimestep: true // 自适应时间步长提升性能 }, layout: { improvedLayout: true, // 使用改进的布局算法 hierarchical: { // 如果你想做层级图如组织架构可以启用这个 enabled: false, // 我们先关闭使用力导向布局 direction: UD, sortMethod: hubsize } } }有时候我们可能希望图形初始化时就有一个好的视角。network.moveTo方法可以帮我们调整视图。// 在 initNetwork 函数创建实例后 onMounted(() { initNetwork() if (networkInstance) { // 延迟执行等待物理引擎稳定 setTimeout(() { networkInstance?.moveTo({ scale: 0.9, // 缩放级别 position: { x: 0, y: 0 }, // 移动到中心点 animation: { // 动画效果 duration: 1000, easingFunction: easeInOutCubic } }) // 或者直接适配所有节点到视图 // networkInstance?.fit({ animation: true }) }, 500) } })4. 高级交互与业务集成静态的图好看但交互才是灵魂。vis.js 提供了丰富的事件让我们能够响应用户操作并与后端业务逻辑联动。4.1 监听图形事件我们可以监听节点的点击、双击、悬停边的选择画布的缩放等事件并执行相应的回调函数。// 在 initNetwork 函数创建实例后添加事件监听 if (networkInstance) { // 节点点击事件 networkInstance.on(click, (params) { if (params.nodes.length 0) { const nodeId params.nodes[0] const nodeData nodes.value.get(nodeId) console.log(点击了节点:, nodeId, nodeData) // 这里可以触发一个模态框显示节点详情 // emit(node-click, nodeData) } else if (params.edges.length 0) { const edgeId params.edges[0] const edgeData edges.value.get(edgeId) console.log(点击了边:, edgeId, edgeData) } else { // 点击了空白处 console.log(点击了画布空白区域) // 可以在这里取消所有选中状态 networkInstance?.unselectAll() } }) // 节点双击事件常用于展开/折叠群组或跳转详情页 networkInstance.on(doubleClick, (params) { if (params.nodes.length 0) { console.log(双击了节点可以跳转到详情页:, params.nodes[0]) } }) // 鼠标悬停在节点上 networkInstance.on(hoverNode, (params) { console.log(悬停在节点上:, params.node) // 可以高亮该节点的邻居节点和连接边 networkInstance?.selectNodes([params.node], false) // false 表示不取消其他选择 const connectedEdges networkInstance?.getConnectedEdges(params.node) || [] networkInstance?.selectEdges(connectedEdges) }) // 鼠标离开节点 networkInstance.on(blurNode, () { networkInstance?.unselectAll() }) // 画布缩放或拖动后触发 networkInstance.on(dragEnd, () { console.log(画布拖动结束) }) networkInstance.on(zoom, (params) { // params.direction 是 in 或 out console.log(缩放级别:, params.scale) }) }4.2 动态数据操作关系图的数据往往是动态的。我们需要提供方法来增删改查节点和边。script setup langts // ... 之前的 ref 和初始化代码 // 添加一个节点 const addNode (node: NetworkNode) { nodes.value.add(node) } // 更新一个节点例如修改标签 const updateNode (nodeId: string | number, updatedFields: PartialNetworkNode) { nodes.value.update({ id: nodeId, ...updatedFields }) } // 删除一个节点会同步删除与之相连的边 const deleteNode (nodeId: string | number) { nodes.value.remove(nodeId) } // 添加一条边 const addEdge (edge: NetworkEdge) { // 确保 id 唯一如果未提供则生成一个 if (!edge.id) { edge.id edge_${edge.from}_${edge.to}_${Date.now()} } edges.value.add(edge) } // 根据业务逻辑查找节点例如查找某个用户的所有关注 const findNodeConnections (nodeId: string | number) { if (!networkInstance) return { in: [], out: [] } const connectedEdges networkInstance.getConnectedEdges(nodeId) const connections { in: [] as NetworkEdge[], // 指向该节点的边 out: [] as NetworkEdge[] // 从该节点出发的边 } connectedEdges.forEach(edgeId { const edge edges.value.get(edgeId) if (edge.to nodeId) connections.in.push(edge) if (edge.from nodeId) connections.out.push(edge) }) return connections } // 模拟从 API 异步加载数据 const loadDataFromApi async (apiUrl: string) { try { const response await fetch(apiUrl) const data await response.json() // 假设返回数据格式为 { nodes: [...], edges: [...] } nodes.value.clear() edges.value.clear() nodes.value.add(data.nodes) edges.value.add(data.edges) // 数据更新后重新稳定布局 networkInstance?.stabilize() } catch (error) { console.error(加载数据失败:, error) } } /script4.3 集成工具栏与视图控制一个产品化的关系图通常需要一些控制按钮比如放大、缩小、适应屏幕、切换布局等。vis.js 本身提供了一些交互但我们也可以自己构建一个控制面板。template div classnetwork-wrapper !-- 自定义控制工具栏 -- div classtoolbar button clickzoomIn放大/button button clickzoomOut缩小/button button clickfitView适应屏幕/button button clicktogglePhysics{{ physicsEnabled ? 冻结布局 : 启动布局 }}/button select v-modelselectedLayout changechangeLayout option valueforce力导向布局/option option valuehierarchical层级布局/option /select input typetext v-modelsearchTerm placeholder搜索节点... inputhighlightNode / /div div refnetworkContainer classnetwork-canvas/div /div /template script setup langts import { ref } from vue // ... 其他导入和基础数据 const physicsEnabled ref(true) const selectedLayout ref(force) const searchTerm ref() const zoomIn () { networkInstance?.moveTo({ scale: networkInstance.getScale() * 1.2, animation: true }) } const zoomOut () { networkInstance?.moveTo({ scale: networkInstance.getScale() * 0.8, animation: true }) } const fitView () { networkInstance?.fit({ animation: { duration: 1000 } }) } const togglePhysics () { physicsEnabled.value !physicsEnabled.value networkInstance?.setOptions({ physics: { enabled: physicsEnabled.value } }) if (physicsEnabled.value) { networkInstance?.stabilize() } } const changeLayout () { const newOptions { layout: { hierarchical: { enabled: selectedLayout.value hierarchical, direction: LR, sortMethod: directed } }, physics: { enabled: selectedLayout.value force // 层级布局通常关闭物理引擎 } } networkInstance?.setOptions(newOptions) if (selectedLayout.value force) { networkInstance?.stabilize() } } const highlightNode () { networkInstance?.unselectAll() if (!searchTerm.value) return const allNodes nodes.value.get() const matchedNodes allNodes.filter(node node.label?.toLowerCase().includes(searchTerm.value.toLowerCase()) ) if (matchedNodes.length 0) { networkInstance?.selectNodes(matchedNodes.map(n n.id)) // 将视图聚焦到第一个匹配的节点 networkInstance?.focus(matchedNodes[0].id, { scale: 1.2, animation: true }) } } /script style scoped .network-wrapper { display: flex; flex-direction: column; height: 100%; } .toolbar { padding: 10px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .toolbar button, .toolbar select, .toolbar input { padding: 6px 12px; border: 1px solid #ced4da; border-radius: 4px; background: white; cursor: pointer; } .toolbar button:hover { background-color: #e9ecef; } .network-canvas { flex: 1; /* 占据剩余空间 */ min-height: 500px; } /style5. 性能优化与实战技巧当节点和边的数量达到数百甚至上千时性能就会成为挑战。以下是一些经过实战检验的优化策略。1. 数据分片与增量加载不要一次性渲染所有数据。可以先加载核心节点当用户拖动或缩放至某个区域时再通过network.on(dragEnd或zoom)事件触发加载该区域范围内的数据。2. 简化图形元素在数据量大的情况下关闭阴影、降低物理引擎的迭代次数、使用更简单的节点形状dot比circle性能更好和更少的颜色变化。const performanceOptions { nodes: { shape: dot, // 性能最好的形状 shadow: false, font: { size: 12 } // 减小字体 }, edges: { smooth: false, // 使用直线而非曲线 arrows: { to: { scaleFactor: 0.5 } } // 减小箭头 }, physics: { enabled: true, solver: repulsion, // repulsion 求解器在大规模图上可能更快 repulsion: { nodeDistance: 150, centralGravity: 0.1, springLength: 100, springConstant: 0.01, damping: 0.09 }, stabilization: { iterations: 200 // 减少稳定化迭代次数以加快初始渲染 } }, interaction: { hover: false, // 关闭悬停高亮可以提升交互流畅度 tooltipDelay: 200 // 增加提示延迟 } }3. 使用聚类Clustering对于高度连接的子图可以使用聚类功能将其折叠成一个超级节点。// 在 options 中启用聚类 const options { // ... layout: { improvedLayout: true } } // 在初始化后可以调用聚类方法需要额外引入算法或手动定义规则 // 例如将所有 topic 组的节点聚类 const clusterOptionsByGroup { joinCondition: (nodeOptions: any) nodeOptions.group topic, processProperties: (clusterOptions: any, childNodes: any[]) { // 自定义聚类节点的属性 clusterOptions.label 话题聚类 [${childNodes.length}]; clusterOptions.title 包含 ${childNodes.length} 个相关话题节点; clusterOptions.size childNodes.length * 10 30; // 大小随子节点数增加 return clusterOptions; }, clusterNodeProperties: { // 聚类节点样式 shape: database, color: { background: #ffbe76, border: #f0932b } } } // networkInstance?.cluster(clusterOptionsByGroup);4. 善用setOptions与setData当需要大规模更新配置或数据时使用network.setOptions和network.setData比直接操作DataSet并让 vis.js 侦听所有变化更高效。可以在用户点击“应用配置”按钮时批量更新。5. 处理内存泄漏务必在 Vue 组件的onUnmounted生命周期钩子中调用network.destroy()来移除所有事件监听器和释放内存。最后把完整的组件集成到你的页面中配合后端 API 提供动态数据一个功能强大、交互流畅的社交网络关系图就诞生了。vis.js 的文档非常详细遇到复杂需求时多去翻看它的配置项列表总能找到解决方案。记住好的可视化是设计和技术的结合多思考如何用视觉元素更直观地传达你的数据故事。