RelationGraph 人物关系图

基于 @antv/g6 封装的关系图组件，用于展示人物之间的关联关系。

安装

依赖

pnpm add @antv/g6

基础用法

传入节点 `nodes` 和关系边 `edges` 数据即可渲染关系图。

<template>
  <div>
    <hx-relation-graph
      :nodes="nodes"
      :edges="edges"
      height="400px"
      :node-size="60"
    />
  </div>
</template>

<script setup lang="ts">
import { HxRelationGraph } from "@whhx/ui"

// 基础数据 - 姓名 + 角色
const nodes = [
  { id: '1', name: '张三', role: '技术总监' },
  { id: '2', name: '李四', role: '项目经理' },
  { id: '3', name: '王五', role: '前端开发' },
  { id: '4', name: '赵六', role: '后端开发' },
  { id: '5', name: '钱七', role: 'UI设计师' },
]

const edges = [
  { source: '1', target: '2', label: '管理' },
  { source: '1', target: '5', label: '管理' },
  { source: '2', target: '3', label: '指导' },
  { source: '2', target: '4', label: '指导' },
  { source: '3', target: '4', label: '协作' },
]
</script>

自定义节点样式

通过 `style` 属性为节点设置图片、大小和边框颜色。

<template>
  <div>
    <hx-relation-graph
      :nodes="nodes"
      :edges="edges"
      height="400px"
      :node-size="50"
    />
  </div>
</template>

<script setup lang="ts">
import { HxRelationGraph } from "@whhx/ui"

// 带头像和样式的节点数据
const nodes = [
  {
    id: '1',
    name: '李泽宽',
    role: '主对象',
    style: {
      img: '/images/avatars/felix.svg',
      size: 60,
      stroke: '#5B8FF9',
    },
  },
  {
    id: '2',
    name: '张三',
    role: '父亲',
    style: {
      img: '/images/avatars/aneka.svg',
      size: 50,
      stroke: '#5B8FF9',
    },
  },
  {
    id: '3',
    name: '李四',
    role: '母亲',
    style: {
      img: '/images/avatars/mimi.svg',
      size: 50,
      stroke: '#5B8FF9',
    },
  },
  {
    id: '4',
    name: '王五',
    role: '同事',
    style: {
      img: '/images/avatars/leo.svg',
      size: 50,
      stroke: '#5AD8A6',
    },
  },
  {
    id: '5',
    name: '赵六',
    role: '朋友',
    style: {
      img: '/images/avatars/luna.svg',
      size: 50,
      stroke: '#5AD8A6',
    },
  },
  {
    id: '6',
    name: '钱七',
    role: '重点人',
    style: {
      img: '/images/avatars/max.svg',
      size: 50,
      stroke: '#FF6B6B',
    },
  },
]

const edges = [
  { source: '1', target: '2', data: { label: '父子', stroke: '#5B8FF9' } },
  { source: '1', target: '3', data: { label: '母子', stroke: '#5B8FF9' } },
  { source: '1', target: '4', data: { label: '同事关系' } },
  { source: '1', target: '5', data: { label: '朋友关系' } },
  { source: '4', target: '6', data: { label: '重点人', stroke: '#FF6B6B' } },
]
</script>

径向布局

通过 `layoutType="radial"` 使用径向布局，适合展示层级关系。

<template>
  <div>
    <hx-relation-graph
      :nodes="nodes"
      :edges="edges"
      height="450px"
      layout-type="radial"
      :unit-radius="120"
      :link-distance="150"
      :node-size="50"
    />
  </div>
</template>

<script setup lang="ts">
import { HxRelationGraph } from "@whhx/ui"

// 径向布局数据 - 中心节点 + 层级关系
const nodes = [
  { id: '0', name: '中心人物', role: '核心', style: { size: 60, stroke: '#5B8FF9' } },
  { id: '1', name: '一级关系', role: '直接关联', style: { size: 45, stroke: '#5B8FF9' } },
  { id: '2', name: '一级关系', role: '直接关联', style: { size: 45, stroke: '#5B8FF9' } },
  { id: '3', name: '一级关系', role: '直接关联', style: { size: 45, stroke: '#5B8FF9' } },
  { id: '4', name: '二级关系', role: '间接关联', style: { size: 35, stroke: '#5AD8A6' } },
  { id: '5', name: '二级关系', role: '间接关联', style: { size: 35, stroke: '#5AD8A6' } },
  { id: '6', name: '二级关系', role: '间接关联', style: { size: 35, stroke: '#5AD8A6' } },
  { id: '7', name: '二级关系', role: '间接关联', style: { size: 35, stroke: '#5AD8A6' } },
  { id: '8', name: '三级关系', role: '远亲', style: { size: 30, stroke: '#b1b1b1' } },
  { id: '9', name: '三级关系', role: '远亲', style: { size: 30, stroke: '#b1b1b1' } },
  { id: '10', name: '三级关系', role: '远亲', style: { size: 30, stroke: '#b1b1b1' } },
  { id: '11', name: '三级关系', role: '远亲', style: { size: 30, stroke: '#b1b1b1' } },
]

const edges = [
  // 中心到一级
  { source: '0', target: '1', data: { label: '直接关系' } },
  { source: '0', target: '2', data: { label: '直接关系' } },
  { source: '0', target: '3', data: { label: '直接关系' } },
  // 一级到二级
  { source: '1', target: '4', data: { label: '关联' } },
  { source: '1', target: '5', data: { label: '关联' } },
  { source: '2', target: '6', data: { label: '关联' } },
  { source: '3', target: '7', data: { label: '关联' } },
  // 二级到三级
  { source: '4', target: '8', data: { label: '弱关系' } },
  { source: '5', target: '9', data: { label: '弱关系' } },
  { source: '6', target: '10', data: { label: '弱关系' } },
  { source: '7', target: '11', data: { label: '弱关系' } },
]
</script>

折叠展开

通过 `collapsible` 启用折叠展开功能，双击节点可切换其子节点的显示/隐藏。

<template>
  <div>
    <hx-relation-graph
      :nodes="nodes"
      :edges="edges"
      height="500px"
      layout-type="radial"
      :unit-radius="100"
      :node-size="40"
      :collapsible="true"
      :show-minimap="true"
    />
  </div>
</template>

<script setup lang="ts">
import { HxRelationGraph } from "@whhx/ui"

// 可折叠的关系数据
const nodes = [
  { id: '0', name: '主对象', style: { size: 50, stroke: '#5B8FF9' } },
  { id: '1', name: '家庭成员', style: { size: 35, stroke: '#5B8FF9' } },
  { id: '2', name: '父亲', style: { size: 30, stroke: '#5B8FF9' } },
  { id: '3', name: '母亲', style: { size: 30, stroke: '#5B8FF9' } },
  { id: '4', name: '同事', style: { size: 35, stroke: '#5AD8A6' } },
  { id: '5', name: '张经理', style: { size: 28 } },
  { id: '6', name: '李主管', style: { size: 28 } },
  { id: '7', name: '王同事', style: { size: 28 } },
  { id: '8', name: '朋友', style: { size: 35, stroke: '#5AD8A6' } },
  { id: '9', name: '小李', style: { size: 28 } },
  { id: '10', name: '小王', style: { size: 28 } },
  { id: '11', name: '同学', style: { size: 35, stroke: '#5B8FF9' } },
  { id: '12', name: '大学同学', style: { size: 28 } },
  { id: '13', name: '高中同学', style: { size: 28 } },
]

const edges = [
  // 主对象 -> 类别节点
  { source: '0', target: '1', data: { label: '家庭' } },
  { source: '0', target: '4', data: { label: '同事' } },
  { source: '0', target: '8', data: { label: '朋友' } },
  { source: '0', target: '11', data: { label: '同学' } },
  // 家庭 -> 成员
  { source: '1', target: '2' },
  { source: '1', target: '3' },
  // 同事 -> 具体人
  { source: '4', target: '5' },
  { source: '4', target: '6' },
  { source: '4', target: '7' },
  // 朋友 -> 具体人
  { source: '8', target: '9' },
  { source: '8', target: '10' },
  // 同学 -> 具体人
  { source: '11', target: '12' },
  { source: '11', target: '13' },
]
</script>

带小地图

通过 `showMinimap` 显示小地图，方便浏览大规模关系网络。

<template>
  <div>
    <hx-relation-graph
      :nodes="nodes"
      :edges="edges"
      height="500px"
      :show-minimap="true"
      :node-size="45"
    />
  </div>
</template>

<script setup lang="ts">
import { HxRelationGraph } from "@whhx/ui"

// 大规模数据示例 - 展示小地图效果
const nodes = [
  { id: '0', name: '核心人物' },
  // 第一个群组
  { id: '1', name: '同事A' },
  { id: '2', name: '同事B' },
  { id: '3', name: '同事C' },
  { id: '4', name: '同事D' },
  { id: '5', name: '同事E' },
  // 第二个群组
  { id: '6', name: '家人A' },
  { id: '7', name: '家人B' },
  { id: '8', name: '家人C' },
  { id: '9', name: '家人D' },
  // 第三个群组
  { id: '10', name: '朋友A' },
  { id: '11', name: '朋友B' },
  { id: '12', name: '朋友C' },
  { id: '13', name: '朋友D' },
  { id: '14', name: '朋友E' },
  // 第四个群组
  { id: '15', name: '同学A' },
  { id: '16', name: '同学B' },
  { id: '17', name: '同学C' },
  { id: '18', name: '同学D' },
  { id: '19', name: '同学E' },
]

const edges = [
  // 核心连接到各组
  { source: '0', target: '1', data: { label: '同事' } },
  { source: '0', target: '6', data: { label: '家人' } },
  { source: '0', target: '10', data: { label: '朋友' } },
  { source: '0', target: '15', data: { label: '同学' } },
  // 同事组内连接
  { source: '1', target: '2' },
  { source: '1', target: '3' },
  { source: '2', target: '4' },
  { source: '3', target: '5' },
  { source: '4', target: '5' },
  // 家人组内连接
  { source: '6', target: '7' },
  { source: '6', target: '8' },
  { source: '7', target: '9' },
  // 朋友组内连接
  { source: '10', target: '11' },
  { source: '10', target: '12' },
  { source: '11', target: '13' },
  { source: '12', target: '14' },
  { source: '13', target: '14' },
  // 同学组内连接
  { source: '15', target: '16' },
  { source: '15', target: '17' },
  { source: '16', target: '18' },
  { source: '17', target: '19' },
  // 跨组连接
  { source: '1', target: '10' },
  { source: '6', target: '15' },
  { source: '10', target: '16' },
]
</script>

节点事件

支持节点点击和双击事件，可在事件回调中获取节点数据。

点击节点

-

角色

-

<template>
  <div>
    <div class="relation-graph-event-demo">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="点击节点">
          {{ clickedNode?.name || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="角色">
          {{ clickedNode?.role || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <hx-relation-graph
      :nodes="nodes"
      :edges="edges"
      height="350px"
      @node-click="handleNodeClick"
      @node-dblclick="handleNodeDblClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ElMessage } from "element-plus"
import { HxRelationGraph } from "@whhx/ui"
import type { RelationNodeClickEvent, RelationNode } from "@whhx/ui"

const clickedNode = ref<RelationNode | null>(null)

const nodes = [
  { id: '1', name: '张三', role: '技术总监' },
  { id: '2', name: '李四', role: '项目经理' },
  { id: '3', name: '王五', role: '前端开发' },
  { id: '4', name: '赵六', role: '后端开发' },
  { id: '5', name: '钱七', role: 'UI设计师' },
]

const edges = [
  { source: '1', target: '2', label: '管理' },
  { source: '1', target: '5', label: '管理' },
  { source: '2', target: '3', label: '指导' },
  { source: '2', target: '4', label: '指导' },
  { source: '3', target: '4', label: '协作' },
]

function handleNodeClick(event: RelationNodeClickEvent) {
  clickedNode.value = event.node
  ElMessage.success(`点击了节点：${event.node.name}`)
}

function handleNodeDblClick(event: RelationNodeClickEvent) {
  ElMessage.info(`查看详情：${event.node.name} - ${event.node.role}`)
}
</script>

<style scoped>
.relation-graph-event-demo {
  margin-bottom: 12px;
}
</style>

通讯关系

展示人物及其虚拟账号（电话、微信、QQ、抖音等）。账号自动展开为独立节点并连线到人物。

<template>
  <div class="contact-demo">
    <hx-relation-graph
      :nodes="nodes"
      :edges="edges"
      :width="800"
      :height="600"
      :node-size="60"
      :show-minimap="false"
      :show-search="true"
      :collapsible="true"
      layout-type="radial"
    />
  </div>
</template>

<script setup lang="ts">
import { HxRelationGraph, type RelationNode, type RelationEdge } from '@whhx/ui'

// 人物节点及其虚拟账号
const nodes: RelationNode[] = [
  {
    id: '1',
    name: '李泽宽',
    role: '主对象',
    gender: 'male',
    contactAccounts: [
      { type: 'phone', value: '138-0013-8000' },
      { type: 'weixin', value: 'lizk888' },
      { type: 'qq', value: '123456789' },
      { type: 'email', value: 'lizk@example.com' },
    ],
    style: {
      size: 60,
      stroke: '#5B8FF9',
    },
  },
  {
    id: '2',
    name: '张三',
    role: '父亲',
    gender: 'male',
    contactAccounts: [
      { type: 'phone', value: '139-0013-9000' },
      { type: 'weixin', value: 'zhangsan_2024' },
    ],
    style: {
      size: 50,
      stroke: '#5B8FF9',
    },
  },
  {
    id: '3',
    name: '李四',
    role: '母亲',
    gender: 'female',
    contactAccounts: [
      { type: 'phone', value: '137-0013-7000' },
      { type: 'weixin', value: 'lis2024' },
      { type: 'douyin', value: 'lisilisi' },
    ],
    style: {
      size: 50,
      stroke: '#5B8FF9',
    },
  },
  {
    id: '4',
    name: '王五',
    role: '同事',
    gender: 'male',
    contactAccounts: [
      { type: 'phone', value: '136-0013-6000' },
      { type: 'qq', value: '987654321' },
      { type: 'email', value: 'wangwu@company.com' },
    ],
    style: {
      size: 50,
      stroke: '#5AD8A6',
    },
  },
  {
    id: '5',
    name: '赵六',
    role: '朋友',
    gender: 'unknown',
    contactAccounts: [
      { type: 'weixin', value: 'zhaoliu666' },
      { type: 'douyin', value: 'zhaoliu_douyin' },
    ],
    style: {
      size: 50,
      stroke: '#5AD8A6',
    },
  },
  {
    id: '6',
    name: '钱七',
    role: '重点人',
    gender: 'male',
    contactAccounts: [
      { type: 'phone', value: '135-0013-5000' },
    ],
    style: {
      size: 50,
      stroke: '#FF6B6B',
    },
  },
]

// 人物之间的关系边
const edges: RelationEdge[] = [
  { source: '1', target: '2', label: '父子', data: { stroke: '#5B8FF9' } },
  { source: '1', target: '3', label: '母子', data: { stroke: '#5B8FF9' } },
  { source: '1', target: '4', label: '同事', data: { stroke: '#5AD8A6' } },
  { source: '1', target: '5', label: '朋友', data: { stroke: '#5AD8A6' } },
  { source: '1', target: '6', label: '关注', data: { stroke: '#FF6B6B' } },
]
</script>

<style scoped>
.contact-demo {
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  overflow: hidden;
}
</style>

全局配置

可通过 HxConfigProvider 在应用顶层统一配置关系图的默认值：

<template>
  <HxConfigProvider :relationGraph="{ showSearch: false, nodeMenu: false }">
    <App />
  </HxConfigProvider>
</template>

API

Props

属性	说明	类型	默认值
nodes	人物节点列表	RelationNode[]	[]
edges	关系边列表	RelationEdge[]	[]
width	画布宽度	number | string	'100%'
height	画布高度	number | string	'500px'
showSearch	是否显示搜索框	boolean	true
nodeMenu	是否启用节点点击菜单	boolean	true
showMinimap	是否显示小地图	boolean	false
layoutType	布局类型	'force' | 'radial'	'force'
unitRadius	径向布局每层半径	number	100
linkDistance	边长度	number	120
nodeSize	节点默认大小	number	60
collapsible	是否启用折叠展开	boolean	false
defaultIcon	默认图标配置	RelationGraphIconConfig	{ type: 'iconify', icon: 'mdi:account' }

RelationNode 节点数据

属性	说明	类型	默认值
id	节点唯一标识	string	-
name	姓名	string	-
avatar	头像 URL	string	-
role	职位/角色	string	-
gender	性别（用于默认头像）	'male' | 'female' | 'unknown'	-
contactAccounts	关联的虚拟账号列表	ContactAccount[]	-
nodeType	节点类型	'person' | 'account'	'person'
style	节点样式配置	RelationNodeStyle	-
[key: string]	其他自定义字段	unknown	-

ContactAccount 虚拟账号

属性	说明	类型	默认值
type	账号类型	AccountType	-
value	账号值	string	-

AccountType 账号类型

'phone' \| 'qq' \| 'weixin' \| 'douyin' \| 'email' \| 'other'

类型	说明	图标
phone	电话	lucide:phone
qq	QQ	logos:qq
weixin	微信	logos:wechat
douyin	抖音	logos:tiktok
email	邮箱	lucide:mail
other	其他	lucide:at-sign

RelationNodeStyle 节点样式

属性	说明	类型	默认值
size	节点大小	number	60
img	头像/图标 URL	string	-
stroke	边框颜色	string	'#5B8FF9'

RelationEdge 边数据

属性	说明	类型	默认值
source	源节点 ID	string	-
target	目标节点 ID	string	-
label	关系标签	string	-
data	边数据配置	RelationEdgeData	-
[key: string]	其他自定义字段	unknown	-

RelationEdgeData 边数据配置

属性	说明	类型	默认值
stroke	边的颜色	string	'#b1b1b1'
label	关系标签	string	-

RelationGraphIconConfig 默认图标配置

属性	说明	类型	默认值
type	图标类型	'svg' | 'iconify'	'iconify'
svg	SVG symbol id（type 为 svg 时使用）	string	-
icon	iconify 图标名（type 为 iconify 时使用）	string	'mdi:account'

Events

事件名	说明	回调参数
node-click	点击节点	(event: RelationNodeClickEvent) => void
node-dblclick	双击节点	(event: RelationNodeClickEvent) => void

RelationNodeClickEvent

属性	说明	类型
node	节点数据	RelationNode
x	点击位置的 X 坐标	number
y	点击位置的 Y 坐标	number

类型定义

import type { RelationGraphProps, RelationNode, RelationEdge, RelationNodeStyle, RelationEdgeData, RelationGraphIconConfig, RelationNodeClickEvent, AccountType, ContactAccount } from '@whhx/ui'