3D 关系图

3D 关系图用于展示实体之间的关联关系，通过节点和边构成网络结构，支持力导向布局自动调整节点位置，适用于组织架构、知识图谱、网络拓扑、技术栈依赖等场景。

快速开始

最简单的 3D 关系图需要提供节点（nodes）和边（edges）数据：

<template>
  <RayGraph3D :option="chartOption" />
</template>

<script setup>
import { ref } from 'vue';
import { RayGraph3D } from 'raychart';

const chartOption = ref({
  series: [
    {
      type: 'graph3D',
      name: '简单关系图',
      nodes: [
        { id: 'A', name: '节点A', value: 100 },
        { id: 'B', name: '节点B', value: 80 },
        { id: 'C', name: '节点C', value: 70 },
        { id: 'D', name: '节点D', value: 60 },
      ],
      edges: [
        { source: 'A', target: 'B', value: 10 },
        { source: 'A', target: 'C', value: 8 },
        { source: 'B', target: 'D', value: 6 },
        { source: 'C', target: 'D', value: 5 },
      ],
    },
  ],
});
</script>

数据格式说明

• nodes：节点数组，每个节点必须有唯一的 id
• edges：边数组，通过 source 和 target 指定连接的节点 id
• value：节点的 value 影响节点大小，边的 value 影响边的粗细和不透明度

核心配置

数据配置

属性	类型	默认值	说明
series.type	string	-	必须为 'graph3D'
series.nodes	array	-	节点数组（必填）
series.nodes[].id	string	-	节点唯一标识（必填）
series.nodes[].name	string	-	节点名称（用于标签显示）
series.nodes[].value	number	-	节点权重（影响节点大小）
series.nodes[].category	number	-	节点分类索引（对应 categories 数组）
series.edges	array	-	边数组（必填）
series.edges[].source	string	-	起始节点 id（必填）
series.edges[].target	string	-	目标节点 id（必填）
series.edges[].value	number	-	边权重（影响边的粗细和不透明度）

样式配置

属性	类型	默认值	说明
series.symbolSize	number	0.55	节点大小比例
series.nodes[].size	number	-	节点固定大小（可覆盖 value 自动计算）
series.lineStyle	object	-	边样式配置
series.lineStyle.opacity	number	0.5	边透明度（0-1）
series.color	string[]	内置 5 色调色板	节点默认颜色（未被 categories 覆盖时）

节点与边的尺寸

节点大小由 value 自动计算（symbolSize * sqrt(value / 50)，限幅 0.3-1.4），边的粗细由 value 自动计算（限幅 0.015-0.04）。均不支持手动指定尺寸。

节点标签配置（可选）

通过 series.label 配置节点标签：

label: {
  show: true,              // 显示标签
  fontSize: 11,            // 字体大小
  color: '#1e293b',        // 字体颜色
  backgroundColor: 'rgba(255,255,255,0.92)', // 背景颜色
  padding: 4,              // 内边距
  borderRadius: 4          // 圆角半径
}

标签支持背景色和圆角，确保在复杂背景下的可读性。

节点分类配置（进阶）

通过 series.categories 为不同类型的节点设置颜色：

categories: [
  { name: '类型A', color: '#4f46e5' },
  { name: '类型B', color: '#059669' },
  { name: '类型C', color: '#ea580c' }
]

节点的 category 属性对应 categories 数组的索引（从 0 开始）。

力导向布局配置（重要）

通过 series.layout 配置力导向布局算法：

layout: {
  iterations: 220  // 迭代次数（影响布局质量和计算时间）
}

• iterations：增加迭代次数可以获得更稳定的布局，但会增加初始化时间
• 建议值范围：200-300，默认 220

布局算法

力导向布局采用斥力 + 弹簧引力的物理模拟，参数（斥力强度、引力、冷却速度）由节点规模自动计算，无需手动配置。

常见场景

组织架构图

展示公司组织结构和汇报关系：

<template>
  <RayGraph3D :option="chartOption" />
</template>

<script setup>
import { ref } from 'vue';
import { RayGraph3D } from 'raychart';

const chartOption = ref({
  lights: [
    { id: '1', type: 'Ambient', color: '#ffffff', intensity: 0.6 },
    { id: '2', type: 'Point', color: '#fffdf4', intensity: 1.0, position: { x: 10, y: 15, z: 10 } },
  ],
  series: [
    {
      type: 'graph3D',
      name: '组织架构',
      nodes: [
        { id: 'CEO', name: 'CEO 张总', value: 100, category: 0 },
        { id: 'CTO', name: 'CTO 李工', value: 85, category: 1 },
        { id: 'CFO', name: 'CFO 王总', value: 85, category: 1 },
        { id: 'Tech1', name: '技术总监', value: 70, category: 2 },
        { id: 'Tech2', name: '产品总监', value: 70, category: 2 },
        { id: 'Finance1', name: '财务总监', value: 70, category: 2 },
        { id: 'Dev1', name: '前端组', value: 50, category: 3 },
        { id: 'Dev2', name: '后端组', value: 55, category: 3 },
      ],
      edges: [
        { source: 'CEO', target: 'CTO', value: 10 },
        { source: 'CEO', target: 'CFO', value: 10 },
        { source: 'CTO', target: 'Tech1', value: 8 },
        { source: 'CTO', target: 'Tech2', value: 8 },
        { source: 'CFO', target: 'Finance1', value: 8 },
        { source: 'Tech1', target: 'Dev1', value: 6 },
        { source: 'Tech1', target: 'Dev2', value: 6 },
        // 跨部门协作
        { source: 'Tech2', target: 'Dev1', value: 4 },
      ],
      categories: [
        { name: 'C级高管', color: '#ee6666' },
        { name: '副总裁', color: '#5470c6' },
        { name: '总监', color: '#91cc75' },
        { name: '经理/组长', color: '#fac858' },
      ],
      symbolSize: 0.6,
      label: { show: true, fontSize: 11 },
      lineStyle: { opacity: 0.5 },
      layout: { iterations: 200 },
    },
  ],
});
</script>

技术栈依赖关系

展示项目中各技术组件之间的依赖关系：

<script setup>
const chartOption = ref({
  lights: [
    { id: '1', type: 'Ambient', color: '#ffffff', intensity: 0.6 },
    { id: '2', type: 'Directional', color: '#fffdf4', intensity: 0.9, position: { x: 10, y: 15, z: 10 } },
  ],
  series: [
    {
      type: 'graph3D',
      name: '技术栈依赖',
      nodes: [
        { id: 'App', name: '应用层', value: 100, category: 0 },
        { id: 'Frontend', name: '前端应用', value: 80, category: 1 },
        { id: 'Backend', name: '后端服务', value: 85, category: 1 },
        { id: 'Vue', name: 'Vue 3', value: 60, category: 2 },
        { id: 'Three', name: 'Three.js', value: 50, category: 2 },
        { id: 'Node', name: 'Node.js', value: 70, category: 2 },
        { id: 'MySQL', name: 'MySQL', value: 60, category: 3 },
        { id: 'Redis', name: 'Redis', value: 55, category: 3 },
        { id: 'Docker', name: 'Docker', value: 65, category: 3 },
      ],
      edges: [
        { source: 'App', target: 'Frontend', value: 10 },
        { source: 'App', target: 'Backend', value: 10 },
        { source: 'Frontend', target: 'Vue', value: 8 },
        { source: 'Frontend', target: 'Three', value: 6 },
        { source: 'Backend', target: 'Node', value: 8 },
        { source: 'Node', target: 'MySQL', value: 6 },
        { source: 'Node', target: 'Redis', value: 7 },
        { source: 'Backend', target: 'Docker', value: 6 },
      ],
      categories: [
        { name: '应用层', color: '#ee6666' },
        { name: '框架层', color: '#5470c6' },
        { name: '技术栈', color: '#91cc75' },
        { name: '基础设施', color: '#fac858' },
      ],
      symbolSize: 0.6,
      label: { show: true, fontSize: 11 },
      lineStyle: { opacity: 0.5 },
      layout: { iterations: 180 },
    },
  ],
});
</script>

知识图谱

展示知识领域之间的层次和关联关系：

<script setup>
const chartOption = ref({
  lights: [
    { id: '1', type: 'Ambient', color: '#ffffff', intensity: 0.6 },
    { id: '2', type: 'Point', color: '#fffdf4', intensity: 1.0, position: { x: 10, y: 15, z: 10 } },
    { id: '3', type: 'Point', color: '#73c0de', intensity: 0.5, position: { x: -10, y: 5, z: -10 } },
  ],
  series: [
    {
      type: 'graph3D',
      name: 'AI知识图谱',
      nodes: [
        { id: 'AI', name: '人工智能', value: 100, category: 0 },
        { id: 'ML', name: '机器学习', value: 85, category: 1 },
        { id: 'DL', name: '深度学习', value: 80, category: 1 },
        { id: 'NLP', name: '自然语言处理', value: 75, category: 2 },
        { id: 'CV', name: '计算机视觉', value: 75, category: 2 },
        { id: 'CNN', name: '卷积神经网络', value: 60, category: 3 },
        { id: 'RNN', name: '循环神经网络', value: 55, category: 3 },
        { id: 'Transformer', name: 'Transformer', value: 65, category: 3 },
        { id: 'BERT', name: 'BERT', value: 55, category: 4 },
        { id: 'GPT', name: 'GPT', value: 60, category: 4 },
      ],
      edges: [
        { source: 'AI', target: 'ML', value: 10 },
        { source: 'AI', target: 'DL', value: 9 },
        { source: 'ML', target: 'DL', value: 8 },
        { source: 'DL', target: 'NLP', value: 8 },
        { source: 'DL', target: 'CV', value: 8 },
        { source: 'DL', target: 'CNN', value: 7 },
        { source: 'DL', target: 'RNN', value: 7 },
        { source: 'DL', target: 'Transformer', value: 8 },
        { source: 'NLP', target: 'Transformer', value: 7 },
        { source: 'NLP', target: 'BERT', value: 6 },
        { source: 'NLP', target: 'GPT', value: 7 },
        { source: 'Transformer', target: 'BERT', value: 6 },
        { source: 'Transformer', target: 'GPT', value: 7 },
        { source: 'CV', target: 'CNN', value: 7 },
      ],
      categories: [
        { name: '核心领域', color: '#ee6666' },
        { name: '主要分支', color: '#5470c6' },
        { name: '技术方向', color: '#91cc75' },
        { name: '神经网络', color: '#fac858' },
        { name: '具体模型', color: '#73c0de' },
      ],
      symbolSize: 0.6,
      label: { show: true, fontSize: 11 },
      lineStyle: { opacity: 0.5 },
      layout: { iterations: 200 },
    },
  ],
});
</script>

公司关联关系

展示企业集团内部的控股和业务合作关系：

<script setup>
const chartOption = ref({
  lights: [
    { id: '1', type: 'Ambient', color: '#ffffff', intensity: 0.6 },
    { id: '2', type: 'Point', color: '#fffdf4', intensity: 1.0, position: { x: 10, y: 15, z: 10 } },
  ],
  series: [
    {
      type: 'graph3D',
      name: '公司关联关系',
      nodes: [
        { id: 'HQ', name: '集团总部', value: 100, category: 0 },
        { id: 'Tech', name: '科技公司', value: 80, category: 1 },
        { id: 'Finance', name: '金融公司', value: 75, category: 1 },
        { id: 'Retail', name: '零售公司', value: 70, category: 1 },
        { id: 'Cloud', name: '云计算子公司', value: 60, category: 2 },
        { id: 'Bank', name: '银行', value: 65, category: 2 },
        { id: 'Mall', name: '商场', value: 60, category: 2 },
        { id: 'Partner1', name: '战略合作伙伴', value: 45, category: 3 },
      ],
      edges: [
        // 控股关系（粗线）
        { source: 'HQ', target: 'Tech', value: 10 },
        { source: 'HQ', target: 'Finance', value: 10 },
        { source: 'HQ', target: 'Retail', value: 10 },
        { source: 'Tech', target: 'Cloud', value: 8 },
        { source: 'Finance', target: 'Bank', value: 9 },
        { source: 'Retail', target: 'Mall', value: 8 },
        // 业务合作（细线）
        { source: 'Cloud', target: 'Bank', value: 5 },
        { source: 'Bank', target: 'Mall', value: 4 },
        // 外部合作
        { source: 'Tech', target: 'Partner1', value: 5 },
      ],
      categories: [
        { name: '集团总部', color: '#ee6666' },
        { name: '一级子公司', color: '#5470c6' },
        { name: '二级子公司', color: '#91cc75' },
        { name: '合作伙伴', color: '#fac858' },
      ],
      symbolSize: 0.6,
      label: { show: true, fontSize: 11 },
      lineStyle: { opacity: 0.5 },
      layout: { iterations: 200 },
    },
  ],
});
</script>

组件属性

属性	类型	默认值	说明
option	RayChartOption	-	图表配置对象（必填）
width	string | number	'100%'	图表宽度
height	string | number	'600px'	图表高度

相关文档

基础学习

• 快速上手 - 如果您是新手，从这里开始
• 图表配置 - 完整配置选项说明

进阶主题

• 材质系统 - 自定义材质效果（金属度、粗糙度等）
• 光照系统 - 光照原理和配置
• 交互控制 - 相机控制和事件监听
• 数据更新 - 动态更新图表数据

API 参考

• 组件 API - RayGraph3D 组件属性和方法
• 配置项 API - 完整的配置项文档
• 事件系统 - 事件监听和处理

其他图表类型

• 漏斗图 - 转化流程可视化
• 雷达图 - 多维度数据对比
• 3D 地图 - 地理数据可视化
• 查看所有图表 - 浏览完整图表库

在线示例

• 图表库 - 查看更多 3D 关系图示例
• 在线编辑器 - 实时调试配置