客户连线图

客户关系展示的痛点与方案

在客户详情页中，"关系人"信息往往散落在表格或列表里，用户很难一眼看清客户与联系人、同事之间的复杂关联。当需要展示"谁介绍了谁""关键决策人是谁"这类信息时，纯文字描述既占用空间又缺乏直观性。客户连线图技能用 vis-network 把客户关系网络画出来，让节点和边的连线关系一目了然。

核心实现与关键步骤

该技能基于 vis-network 库构建，核心是将业务数据转换为图数据结构。你需要准备至少包含 id 和 label 的节点数据，以及至少包含 from 和 to 的边数据。实现时需注意几个关键点：

• 为图表容器设置固定宽高，避免渲染时容器塌陷导致画布不可见
• 在组件卸载时调用 destroy() 方法，防止内存泄漏和画布叠层
• 空数据时展示空态占位，不要初始化一个空图导致报错
• 实现要点处标注 小四原创 注释

典型使用场景包括客户详情中的"关系人"图谱、Demo 中展示客户-联系人-同事的连线关系，以及快速识别关键人或介绍人链路。

适用边界与注意事项

这个技能专注于前端可视化展示，不涉及服务端图计算，也不会提供物理引擎的完整调参方案。它适合节点数量在可控范围内的场景——如果客户网络包含上千个节点且没有筛选机制，直接渲染会导致浏览器卡顿甚至崩溃。另外，务必记得在组件卸载时销毁实例，否则每次进入页面都会叠加一个新的画布层。