# 环形关系图
布局为环形的节点关系图，用于展现节点以及节点之间的关系数据。
# 属性
# 基础
组件标题： 用于在图层中显示组件的名称。1.1+
组件尺寸： 组件的宽度和高度，单位为
px。组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为
px。背景颜色： 组件的背景颜色。
系列颜色： 图形的颜色。可添加选择颜色显示，默认情况下图形节点的颜色为主题的颜色。
# 系列
鼠标缩放平移： 是否开启鼠标缩放平移。
左边距： 离容器左侧的距离。
右边距： 离容器右侧的距离。
上边距： 离容器上侧的距离。
下边距： 离容器下侧的距离。
布局：
力引导布局： 采用力引导布局。
节点拖拽： 是否开启节点拖拽。
最小边长: 边的两个节点之间的最小距离，这个距离也会受斥力范围影响 。
最大边长： 边的两个节点之间的最大距离，这个距离也会受斥力范围影响 。
斥力范围： 节点之间的斥力因子，值越大则斥力越大。
环形布局： 采用环形布局。
- 旋转标签: 是否旋转标签，默认不旋转。
节点样式：
节点标记： 节点标记图形。
标记图片： 节点标记图片。
节点宽： 节点的宽度。
节点高： 节点的高度。
描边颜色： 节点描边颜色。
阴影大小： 阴影范围。
阴影颜色： 图形的阴影颜色。
提示：
当数据-节点标记为空时，此时节点图形的设置由节点标记，标记图片控制，节点宽高由节点宽，节点高控制，数据-节点标记不为空时，节点大小是由数据-节点标记里的第一个字段所控制，节点标记是由数据-节点标记里第二个字段控制。
文本标签： 指关系图的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
显示文本： 是否显示文本。
内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。{d}: 百分比。
示例：
{b}: {d}回调函数
可用参数为
data。示例：
return data.name;参数
data是 内容格式器需要的单个数据资源。格式如下：{ // 数据名，类目名 name: string, // 传入的原始数据项 data: Object, // 传入的数据值 value: number|Array, // 百分比 percent: number }位置： 标签的位置。
字体颜色： 文本标签字体颜色。
字体大小： 文本标签字体大小。
字体粗细： 文本标签字体粗细。
字体： 文本标签字体样式。
关系边样式：
标签： 指关系图关系边的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
显示： 是否显示文本。
内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。
示例：
{b}: {c}回调函数
可用参数为
data。示例：
return data.name;参数
data是 内容格式器需要的单个数据资源。格式如下：{ // 数据名，类目名 name: string, // 传入的原始数据项 data: Object, // 传入的数据值 value: number|Array }
字体颜色： 文本标签字体颜色。
字体大小： 文本标签字体大小。
字体粗细： 文本标签字体粗细。
字体： 文本标签字体样式。
线样式:
自定义颜色： 是否开启自定义颜色。
源节点标记： 指向源节点的箭头标记。
目标节点标记： 指向目标节点的箭头标记。
样式：
虚线
实线
点线
宽度： 线的宽度。
曲度： 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
# 标题
显示标题： 是否显示标题
内容：
标题
主： 主标题内容。
副： 副标题内容。
超链接
主： 主标题超链接。
副： 副标题超链接。
位置
水平对齐
垂直对齐
外观
内边距
主副间隔
主标题文本样式
字体颜色： 主标题字体颜色。
字体大小： 主标题字体大小。
字体粗细： 主标题字体粗细。
字体： 主标题字体样式。
副标题文本样式
字体颜色： 副标题字体颜色。
字体大小： 副标题字体大小。
字体粗细： 副标题字体粗细。
字体： 副标题字体样式。
# 图例
显示图例： 是否显示图例。
选中模式： 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。
内容格式器： 用来格式化图例文本，支持字符串模板和回调函数两种形式。
字符串模板：
{name}回调函数：
return data;
位置
排列方式： 图例列表的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
文字样式
字体颜色： 图例字体颜色。
字体大小： 图例字体大小。
字体粗细： 图例字体粗细。
字体： 图例字体样式。
# 提示框
显示提示框： 是否显示提示框。
提示模板 ：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
字符串模板
模板变量有
{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在触发点为坐标轴的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b},{c},{d}在不同图表类型下代表数据含义为：- 折线（区域）图、柱状（条形）图、K 线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） - 散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） - 地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） - 饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
- 折线（区域）图、柱状（条形）图、K 线图 :
回调函数
return data;
触发点：
坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
提示外观
背景颜色： 提示框浮层的背景颜色。
边框颜色： 提示框浮层的边框颜色。
边框宽度： 提示框浮层的边框宽。
内边距： 提示框浮层内边距
文本样式
字体颜色： 提示框字体颜色。
字体大小： 提示框字体大小。
字体粗细： 提示框字体粗细。
字体： 提示框字体样式。
# 工具栏
显示工具栏： 是否显示工具栏。
功能按钮
保存为图片按钮
还原按钮
数据视图按钮
位置朝向
排列方式： 功能按钮的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
图标尺寸
图标大小
间隔
# 数据
# 静态数据
上图中的示例JSON代码如下：
[
{
"id": 1,
"name": "Myriel",
"category": "类目0",
"linksValue": "A",
"parentId": 0,
"value": 30
},
{
"id": 2,
"name": "OldMan",
"category": "类目1",
"linksValue": "B",
"parentId": 1,
"value": 19
},
{
"id": 3,
"name": "Rick",
"category": "类目1",
"linksValue": "C",
"parentId": 1,
"value": 20
},
{
"id": 4,
"name": "Morty",
"category": "类目1",
"linksValue": "D",
"parentId": 1,
"value": 20
},
{
"id": 5,
"name": "Cravatte",
"category": "类目1",
"linksValue": "E",
"parentId": 1,
"value": 20
},
{
"id": 6,
"name": "Napoleon",
"category": "类目1",
"linksValue": "F",
"parentId": 1,
"value": 15
},
{
"id": 7,
"name": "Valjean",
"category": "类目2",
"linksValue": "G",
"parentId": 6,
"value": 20
},
{
"id": 8,
"name": "Brever",
"category": "类目2",
"linksValue": "H",
"parentId": 6,
"value": 20
},
{
"id": 9,
"name": "Cosette",
"value": 15,
"category": "类目2",
"linksValue": "I",
"parentId": 7
},
{
"id": 10,
"name": "Chandler",
"value": 15,
"category": "类目2",
"linksValue": "I",
"parentId": 8
},
{
"id": 11,
"name": "Lucia",
"value": 13,
"category": "类目2",
"linksValue": "I",
"parentId": 10
},
{
"id": 12,
"name": "Virginia",
"value": 13,
"category": "类目2",
"linksValue": "I",
"parentId": 2
},
{
"id": 13,
"name": "Chantel",
"value": 20,
"category": "类目2",
"linksValue": "I",
"parentId": 2
},
{
"id": 14,
"name": "Shantae",
"value": 20,
"category": "类目3",
"linksValue": "I",
"parentId": 4
},
{
"id": 15,
"name": "Reagan",
"value": 22,
"category": "类目3",
"linksValue": "I",
"parentId": 3
},
{
"id": 16,
"name": "Tiffany",
"value": 17,
"category": "类目3",
"linksValue": "I",
"parentId": 3
},
{
"id": 17,
"name": "Ernestine",
"value": 17,
"category": "类目3",
"linksValue": "I",
"parentId": 5
},
{
"id": 18,
"name": "Silas",
"value": 24,
"category": "类目4",
"linksValue": "I",
"parentId": 6
},
{
"id": 19,
"name": "Teagan",
"value": 16,
"category": "类目4",
"linksValue": "I",
"parentId": 27
},
{
"id": 20,
"name": "Thomas",
"value": 10,
"category": "类目4",
"linksValue": "I",
"parentId": 27
},
{
"id": 21,
"name": "Zander",
"value": 22,
"category": "类目4",
"linksValue": "I",
"parentId": 15
},
{
"id": 22,
"name": "Jeffery",
"value": 10,
"category": "类目5",
"linksValue": "I",
"parentId": 16
},
{
"id": 23,
"name": "Jeffery",
"value": 14,
"category": "类目5",
"linksValue": "I",
"parentId": 16
},
{
"id": 24,
"name": "Hubert",
"value": 14,
"category": "类目5",
"linksValue": "I",
"parentId": 20
},
{
"id": 25,
"name": "Gordon",
"value": 12,
"category": "类目5",
"linksValue": "I",
"parentId": 6
},
{
"id": 26,
"name": "Luna",
"value": 12,
"category": "类目5",
"linksValue": "I",
"parentId": 17
},
{
"id": 27,
"name": "Lyn",
"value": 12,
"category": "类目6",
"linksValue": "I",
"parentId": 29
},
{
"id": 28,
"name": "Colleen",
"value": 22,
"category": "类目6",
"linksValue": "I",
"parentId": 30
},
{
"id": 29,
"name": "Judith",
"value": 15,
"category": "类目6",
"linksValue": "I",
"parentId": 4
},
{
"id": 30,
"name": "Hayley",
"value": 10,
"category": "类目6",
"linksValue": "I",
"parentId": 3
}
]
节点标识：
- [0] - id: 节点标识，必须有，不能重复。放在节点关系中表示边的源节点名称的字符串。
节点关系：
- [0] - id: 关系边的节点标识。放在节点关系中表示边的源节点名称的字符串。
- [1] - parentId: 关系边的上级节点标识。，边的目标节点名称的字符串。
- [2] - linksValue: 所在边的标签，可无。
节点分类：
- [0] - category: 数据项所在类目的 index，可无。
节点数据：
- [0] - name： 数据项名称。可无。
- [1] - value： 数据项值。可无。
节点标记：
- [0] - symbolSize： 节点的大小。可无。
- [1] - symbol： 节点的标记图形。可无，默认为圆形。
# 数据资源
# 交互
# 点击散点交互事件
勾选启用，开启组件交互功能。当单击关系图的节点时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 点击线段交互事件
勾选启用，开启组件交互功能。当单击关系图的连接线时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 数据响应
关系图支持数据响应配置。