# 关系图

用于展现节点以及节点之间的关系数据。

关系图

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性
系列颜色： 图形的颜色。可添加选择颜色显示，默认情况下图形节点的颜色为主题的颜色。

# 系列

视觉缩放比例： 当前视角的缩放比例。
鼠标缩放平移： 是否开启鼠标缩放平移。
鼠标缩放比例： 鼠标缩放的比例。
图的布局：
- 力引导布局 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
- 环形布局 环形布局。
标记设置4.5+
- 标记图形： 标记的图形样式，见组件管理 -> 属性 -> 图标选择器。
- 两端标记： 边两端的标记类型。
- 两端标记大小： 边两端标记的大小。
位置设置： 同组件管理 -> 属性 -> 视区
布局相应设置：
- 节点可拖拽： 节点是否可拖拽，只在使用力引导布局的时候有用。
- 节点斥力值： 节点之间的斥力因子。
- 中心引力值： 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
- 最小边长： 两个节点之间的最小距离。
- 最大边长： 两个节点之间的最大距离。
- 节点移动速度： 节点的移动速度。
- 鼠标悬浮样式： 关闭节点可拖拽功能后可选择鼠标悬浮在组件上的样式。
- 节点各边曲率： 节点各边的曲率。
普通状态：
- 文本标签：
  - 显示： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
    
    字符串模板变量
    - {a} : 系列名。
    - {b} : 数据名。
    - {c} : 数据值。
    - {@xxx}：数据中名为 xxx 的维度的值，如 {@product}表示名为 'product' 的维度的值。
    - {@[n]}：数据中维度 n 的值，如{@[3]}表示维度 3 的值，从 0 开始计数。
    例如：
```
  {b}: {c}
```
    - 回调函数： 示例：
```
  return data.value;
``
```
  参数 data 是内容格式器需要的单个数据参数。格式如下：
```
  {
      //传入的原始数据项
      data:{
         name:string,
         //系列数据
         value:number
          },
      //数据在传入的data数组中的index
      dataIndex:number|Array,
      //系列在传入的option,series中的index
      seriesIndex:number
  }
```
  - 位置： 文本的位置。
  - 文字距离： 文本间的距离，首先需要选择标签的位置，才能定义文本间的距离。
  - 文字旋转： 文字旋转角度。
  - 文字偏移： 文字相对于原本位置的偏移。
  - 水平对齐： 文字在水平方向上的对齐方式。
  - 垂直对齐： 文字在垂直方向上的对齐方式。
  - 宽高： 文本标签的宽度和高度。
  - 超出宽度： 文字超出宽度的处理方式。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
- 图形样式：
  - 渐变色： 是否开启渐变色。
    - 渐变色方向： 渐变色方向。
    - 渐变色范围： 渐变色从起始颜色到结尾颜色的变化区间。
    - 颜色： 图形整体颜色。
    - 描边颜色： 图形描边颜色。
    - 描边线宽： 图形描边宽度。
    - 描边类型： 图形描边类型。
    - 阴影属性： 自定义散点图在垂直方向和水平方向上的阴影，同时可以设置散点图的模糊效果。
- 线样式：
  - 颜色： 线的颜色。
  - 宽度： 线的宽度。
  - 类型： 线的类型。
  - 曲度： 线的曲度。
- 线文本：
  - 显示： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
    
    字符串模板变量
    - {a} : 系列名。
    - {b} : 数据名。
    - {c} : 数据值。
    - {@xxx}：数据中名为 xxx 的维度的值，如 {@product}表示名为 'product' 的维度的值。
    - {@[n]}：数据中维度 n 的值，如{@[3]}表示维度 3 的值，从 0 开始计数。
    例如：
```
  {b}: {c}
```
    - 回调函数： 示例：
```
  return data.value;
``
```
  参数 data 是内容格式器需要的单个数据参数。格式如下：
```
  {
      //传入的原始数据项
      data:{
         name:string,
         //系列数据
         value:number
          },
      //数据在传入的data数组中的index
      dataIndex:number|Array,
      //系列在传入的option,series中的index
      seriesIndex:number
  }
```
  - 位置： 文本的位置。
  - 文字距离： 文本距节点的位置。
  - 文字旋转： 文本标签字体的旋转角度。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
高亮状态：
- 关闭高亮状态： 关闭高亮状态。
- 聚焦效果： 鼠标放置在树节点时树节点高亮显示（聚焦当前所在系列）。其余属性配置与普通状态相同。
选中状态： 选中状态下树节点的样式，选择模式为单选或多选时生效。
- 关闭选中状态：
- 选择模式： 其余属性配置与普通状态相同。
初始动画：
- 开启动画 是否开启初始动画。
- 动画时长（ms）： 初始动画的时长，支持回调函数，可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。
- 缓动效果 初始动画的缓动效果。

# 数据

# 静态数据

系列颜色

上图中的示例JSON代码如下：

  [
    {
        "target": "OldMan",
        "name": "Myriel",
        "type": "类目0",
        "source": "Myriel",
        "value": 30
    },
    {
        "target": "Champtercier",
        "name": "OldMan",
        "type": "类目1",
        "source": "b",
        "value": 19
    },
    {
        "target": "Champtercier",
        "name": "Champtercier",
        "type": "类目1",
        "source": "OldMan",
        "value": 20
    },
    {
        "target": "Geborand",
        "name": "Geborand",
        "type": "类目1",
        "source": "OldMan",
        "value": 30
    },
    {
        "target": "Cravatte",
        "name": "Cravatte",
        "type": "类目1",
        "source": "OldMan",
        "value": 32
    },
    {
        "target": "Napoleon",
        "name": "Napoleon",
        "type": "类目1",
        "source": "OldMan",
        "value": 30
    },
    {
        "target": "Valjean",
        "name": "Valjean",
        "type": "类目2",
        "source": "Napoleon",
        "value": 25
    },
    {
        "target": "Brever",
        "name": "Brever",
        "type": "类目2",
        "source": "Napoleon",
        "value": 20
    },
    {
        "target": "Cosette",
        "name": "Cosette",
        "type": "类目2",
        "source": "Napoleon",
        "value": 22
    }
]

# 数据资源

系列颜色

# 交互

勾选启用，开启组件交互功能。当单击关系图的节点时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 节点单击事件

勾选启用，开启节点单击交互事件。

# 标记悬停事件

勾选启用，开启标记悬停事件。

# 标记移出事件

勾选启用，开启标记移出事件。

# 数据响应

关系图支持数据响应配置。

# 节点编程

# 事件

图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
节点单击事件： 节点单击触发事件。
- 抛出的参数： 节点所携带的数据。
标记悬停事件： 标记悬停触发事件。
- 抛出的参数： 节点所携带的数据。
标记移出事件： 标记移出触发事件。
- 抛出的参数： 节点所携带的数据。

# 动作

导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。

← 径向树图多节点拓扑图 →

# 关系图

# 属性

# 基础

# 系列

# 标题

# 图例

# 提示框

# 工具栏

# 数据

# 静态数据

# 数据资源

# 交互

# 节点单击事件

# 标记悬停事件

# 标记移出事件

# 数据响应

# 节点编程

# 事件

# 动作