环形关系图
环形关系图
布局为环形的节点关系图,用于展现节点以及节点之间的关系数据。
属性
基础
组件标题: 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+
组件尺寸: 组件的宽度和高度,单位为
px
。- 锁定纵横比::单击
切换是否锁定纵横比,锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
- 锁定纵横比::单击
组件位置: 组件在大屏中的位置,包括组件的横坐标和纵坐标,单位为
px
。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。隐藏时解析: 默认组件设置隐藏后组件不解析,组件配置的数据资源及交互事件,节点编程事件都不会执行。当开启隐藏时解析时,上述功能将执行。
提示
隐藏时解析常用于页面中不需要展示组件但要获取相关数据。
- 系列颜色: 图形的颜色。可添加选择颜色显示,默认情况下图形节点的颜色为主题的颜色。

系列
视觉缩放比例: 设置视觉的缩放比例。调整图表的整体显示大小,支持放大或缩小。
鼠标缩放平移: 设置鼠标的交互行为,包括缩放和平移。
开启: 同时支持缩放和平移。
关闭: 禁用缩放和平移。
只平移: 仅支持平移,不支持缩放。
只缩放: 仅支持缩放,不支持平移。
鼠标缩放比例: 设置鼠标缩放的比例。
图的布局: 设置关系图的布局方式,可选
力引导布局
、环形布局
。力引导布局 模拟弹簧电荷模型,节点之间通过斥力和引力达到平衡,布局结果具有对称性和局部聚合性。
环形布局 节点沿环形排列,适合展示层次结构或循环关系。
标记设置
标记图形
SVG path输入框: 允许用户输入自定义的 SVG 路径。
图标选择区域: 可以选择系统内置的图标和上传到素材库的图标。
尺寸: 设置图标的大小,支持百分比和固定大小。
旋转角度: 设置图标的旋转角度。
保持长宽比: 设置是否保持图标的长宽比。开启后调整尺寸时,长宽比保持不变。
图片地址: 允许用户输入图片地址。
图片选择区域: 可以选择系统内置的图片和上传到素材库的图片。
尺寸: 设置图片的大小,支持百分比和固定大小。
旋转角度: 设置图标的旋转角度。
两端标记: 设置连线两端的标记类型,可选
圆形
、方形
、圆角方形
、三角形
、菱形
、图钉
、箭头形
。两端标记大小: 设置连线两端标记的大小。

- 位置设置
左边距: 绘制区域与组件左边框的距离,可选
绝对值
、百分比
。值越大距离越大,绘制区域越小,图形左边的留白越多。右边距: 绘制区域与组件右边框的距离,可选
绝对值
、百分比
。值越大距离越大,绘制区域越小,图形右边的留白越多。上边距: 绘制区域与组件上边框的距离,可选
绝对值
、百分比
。值越大距离越大,绘制区域越小,图形顶部的留白越多。下边距: 绘制区域与组件下边框的距离,可选
绝对值
、百分比
。值越大距离越大,绘制区域越小,图形底部的留白越多。

布局相应设置
节点可拖拽: 设置节点是否可拖拽。仅在图的布局设置为
力引导布局
时生效。节点斥力值: 设置节点之间的斥力因子。斥力越大,节点之间的间距越大,避免节点重叠。
中心引力值: 设置节点受到的向中心的引力因子。引力越大,节点越向中心靠拢,布局更紧凑。
最小边长: 设置两个节点之间的最小距离。
最大边长: 设置两个节点之间的最大距离。
节点移动速度: 设置节点的移动速度。控制节点在力引导布局中的移动快慢。
鼠标悬浮样式: 设置鼠标悬浮在节点上时的样式。仅在关闭
节点可拖拽
功能后可选择鼠标悬浮在组件上的样式。节点各边曲率: 设置节点之间边的曲率,控制边的弯曲程度。

普通状态
文本标签: 设置图形上的文本标签,可用于说明图形的一些数据信息,例如值、名称等。
显示: 设置是否显示图形上的文本标签,其余配置均在显示标签时生效。
内容格式器: 设置文本标签显示内容。支持
字符串模板
和回调函数
两种形式。字符串模板可直接使用enter
按键进行换行,回调函数返回的字符串可以用\n
换行,支持从HETU
内置函数中获取变量值。2024.5+打开编辑框: 点击输入框中
打开编辑器,可在编辑器中修改内容。
字符串模板变量:
{a}
: 系列名。{b}
: 数据名。{c}
: 数据值。{d}
: 百分比。
示例:
{b}: {d}
回调函数: 可直接输入函数体,系统提供了两个参数
data
和HETU
。- 参数
data
是内容格式器需要的单个数据资源。格式如下:
- 参数
{ // 数据名,类目名 name: string, // 传入的原始数据项 data: Object, // 传入的数据值 value: number|Array, }
示例:
return data.name;
- 参数
HETU
是系统内置函数。可获取变量池
中的变量值。
位置: 设置文本标签上值的位置。可选
上
、左
、右
、下
、内左
、内右
、内上
、内下
、内左上
、内左下
、内右上
、内右下
。文字距离: 设置文本标签与图形之间距离。
文字旋转: 设置文本标签旋转指定角度。值为 -90 度到 90 度,正值是逆时针。
文字偏移: 设置文本标签水平和垂直偏移量,第一个输入框为水平偏移量,第二个输入框为垂直偏移量。
水平偏移: 设置文本标签的水平偏移,值为正时向右偏移,值为负时向左偏移。
垂直偏移: 设置文本标签的垂直偏移,值为正时向下偏移,值为负时向上偏移。
水平对齐: 设置标签在水平方向上的对齐方式,可选
左
、中
和右
。垂直对齐: 设置标签在垂直方向上的对齐方式,可选
上
、中
和下
。宽高: 设置文本标签的宽度与高度,第一个输入框为文本标签的宽度,第二个输入框为文本标签的高度。
超出宽度: 设置文本内容超出设置的宽度展现方式,配置文本宽度时生效,可选
不处理
、截断
、换行
和强制单词换行
。不处理: 设置文本内容超出配置宽度时不做任何处理。
截断: 设置文本内容超出配置宽度时截断超出的内容。
换行: 设置文本内容超出配置宽度时文本自动换行。
强制单词换行: 设置文本内容超出配置宽度时文本自动换行,在英语等拉丁文中会强制单词内换行 。
末尾显示文本: 设置文本截断时末尾显示的文本,默认值为
···
。仅在超出宽度设为截断
时生效。字体颜色: 设置文本标签字体颜色。默认标签颜色与图形颜色一致。
字体大小: 设置文本标签字体大小,单位为
px
。字体粗细: 设置文本标签字体粗细,可选
普通
、加粗
和更细
。默认为普通
。字体: 设置文本标签字体样式,可选系统内置字体和自定义添加字体。

图形样式: 该系列下图形的颜色、边框设置,支持颜色填充和渐变填充两种方式。
渐变色: 点击
开启图形渐变色配置。
渐变色方向: 设置图形渐变色的方向,可为
正下到正上
、左下到右上
和右上到左下
。正下到正上: 设置的两个颜色从上至下进行渐变,最上方显示第一个颜色,最下方显示第二个颜色。
左下到右上: 设置的两个颜色从左下角至右上角进行渐变,左下角显示第二个颜色,右上角显示第一个颜色。
右上到左下: 设置的两个颜色从右上角至左下角进行渐变,左下角显示第一个颜色,右上角显示第二个颜色。
渐变色范围: 设置图形渐变色的颜色范围。
初始颜色: 点击第一个颜色选择器
设置渐变色的第一个颜色。
渐变范围: 拖动
中滑块设置渐变范围,两侧滑块均可拖动。第一个滑块越靠右,则第一个颜色占比越高。第二个滑块越靠左,则第二个颜色越高。
结束颜色: 点击第一个颜色选择器
设置渐变色的第二个颜色。
颜色: 设置图形的颜色,仅在
渐变色
关闭时生效。描边颜色: 设置图形描边的颜色。
描边线宽: 设置图形描边线的宽度。值越大,描边越明显;值越小,描边越细腻。
描边类型: 设置图形描边线的类型,可选
实线
、虚线
、点线
。圆角: 设置图形四角的圆角半径。
阴影属性:
点击
设置柱背景阴影颜色。
水平: 阴影的水平偏移量。值为0时阴影在图形下方,值大于0时阴影向右侧偏移,值小于0时阴影向左侧偏移。
垂直: 阴影的垂直偏移量。值为0时阴影在图形下方,值大于0时阴影向下方偏移,值小于0时阴影向下方偏移。
模糊: 阴影的模糊程度。值为0时阴影没有模糊效果,值越大阴影效果越明显。

线样式:
颜色: 设置线的颜色。
宽度: 设置线的宽度。值越大线越宽。
类型: 设置线的类型,可选
实线
、虚线
、点状线
。曲度: 设置线的曲度,控制线的弯曲程度。

线文本: 其属性配置与文本标签相同。
高亮状态:
聚焦效果: 鼠标放置在树节点时树节点高亮显示(聚焦当前所在系列)。
其余属性配置与普通状态相同。
选中状态: 选中状态下图形的样式,选择模式为单选或多选时生效。
选择模式: 设置图表的交互选择模式,可选
不可选
、单选
、多选
。其余属性配置与普通状态相同。
初始动画: 图表初始化渲染的动画配置。
开启动画: 图表渲染时是否启用动画。开启后图表初始化时展示图形具有动画效果。在性能较弱的终端机器查看大屏页面时建议关闭组件动画以节约性能开销。
动画时长(ms): 设置动画的时长。值越大动画持续时间越长。
缓动效果: 动画的缓动效果。

标题
标题通常对图表进行概括性说明,包含主标题和副标题。
显示标题: 组件是否显示标题。默认为不显示。
内容
标题
主: 可设置主标题展示的内容。
副: 可设置副标题展示的内容。
超链接: 可对组件标题进行链接配置,实现页面跳转。
主: 配置主标题跳转链接,以打开新窗口的形式进行跳转。仅在开启标题且主标题内容不为空时可用。
副: 配置副标题跳转链接,以打开新窗口的形式进行跳转。仅在开启标题且副标题内容不为空时可用。
位置
水平对齐: 主副标题在水平方向的位置,可选
对齐
、绝对值
和百分比
。对齐: 主副标题在水平方向对齐方式,可选
左
、中
和右
。绝对值: 主副标题与组件左上角的水平间距,单位为
px
。百分比: 主副标题与组件左上角的水平间距,单位为
%
。
垂直对齐: 主副标题在垂直方向的位置,可选
对齐
、绝对值
和百分比
。对齐: 主副标题在水平方向对齐方式,可选
上
、中
和下
。绝对值: 主副标题与组件左上角的垂直间距,单位为
px
。百分比: 主副标题与组件左上角的垂直间距,单位为
%
。
外观
内边距: 主副标题距组件上下左右的边距。值越大边距越大。
主副间隔: 主标题与副标题之间的间隔。值越大间隔越大。

主标题文本样式
字体颜色: 可设置主标题文字颜色。默认颜色跟随主题变化。
字体大小: 主标题文字大小。值为正数,值越大字体越大。单位为
px
。字体粗细: 主标题字体粗细,可选
普通
、加粗
和更细
。字体: 主标题字体样式,可选系统内置字体和自定义字体。
副标题文本样式
字体颜色: 可设置副标题文字颜色。默认颜色跟随主题变化。
字体大小: 副标题字体大小。值为正数,值越大字体越大。单位为
px
。字体粗细: 副标题字体粗细,可选
普通
、加粗
和更细
。字体: 副标题字体样式,可选系统内置字体和自定义字体。

图例
图例可以通过颜色、图标等形式标识图表中的不同数据系列,使用户能够快速识别每个系列对应的数据。
用户可以通过点击图例来显示或隐藏对应的数据系列,方便动态调整图表展示的内容。
显示图例: 组件是否显示图例。
选择类型: 设置图例的类型,可选
普通图例
和分页图例
。
提示:
设置分页图例时,不一定出现翻页控件。翻页图例出现的条件是,当前图例区域不足以容纳所有图例,一种是图例较多时,一种是当前图例区域较小时,区域大小设置在 区域/位置。
选中模式: 设置图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。可选
不可选
、单选
和多选
。图标: 设置图例展示的图标样式,可选
圆
、矩形
、圆矩形
、三角形
、菱形
和取消图标
。图例间距: 设置每两个图例之间的间距。值越大图例间隔越远。
图例宽度: 设置图例图形的宽度。值越大图形越宽。
图例高度: 设置图例图形的高度。值越大图形越高。
内容格式器: 用来格式化图例文本,支持字符串模板和回调函数两种形式。字符串模板可直接使用
enter
按键进行换行,回调函数返回的字符串可以用\n
换行。支持从HETU
内置函数中获取变量值。2024.5+字符串模板:
{name}
回调函数: 可直接输入函数体,系统提供了两个参数
data
和HETU
。return data;
区域/位置
排列方式: 设置图例列表的布局朝向,可选
水平
和垂直
。水平: 图例从左至右依次排开。
垂直: 图例从上至下依次排开。
区域宽度: 设置图例区域的宽度,仅在排列方式选择水平排列时生效。
区域高度: 设置图例区域的高度,仅在排列方式选择垂直排列时生效。
水平位置: 图例在水平方向的位置,可选
对齐
、绝对值
和百分比
。对齐: 图例在水平方向对齐方式,可选
左
、中
和右
。绝对值: 图例与组件左上角的水平间距,单位为
px
。百分比: 图例与组件左上角的水平间距,单位为
%
。
垂直位置: 图例在垂直方向的位置,可选
对齐
、绝对值
和百分比
。对齐: 图例在水平方向对齐方式,可选
上
、中
和下
。绝对值: 图例与组件左上角的垂直间距,单位为
px
。百分比: 图例与组件左上角的垂直间距,单位为
%
。

文字样式
字体颜色: 设置图例的字体颜色。默认颜色跟随主题。
字体大小: 设置图例字体的大小。值越大,图例字体越大。
字体粗细: 设置图例字体的粗细,可选
普通
、加粗
和更细
。字体: 设置图例字体的样式,可选系统内置字体和自定义字体。
背景块设置 设置图例背景区域的样式
内边距: 设置图例在背景区域中上下左右的间距。值越大,间距越大。
背景色: 设置背景区域的颜色。默认无颜色。
边框色: 设置背景区域的边框颜色。
边框线宽: 设置背景区域边框线的宽度。值越大,边框越宽。
圆角半径: 设置背景区域四个角的圆角样式。
阴影颜色: 设置背景区域的阴影颜色。
阴影大小: 设置背景区域的阴影模糊效果。值为0时阴影没有模糊效果,值越大阴影效果越明显。
X 轴偏移: 阴影的水平偏移量。值为0时阴影在背景区域下方,值大于0时阴影向右侧偏移,值小于0时阴影向左侧偏移。
Y 轴偏移: 阴影的垂直偏移量。值为0时阴影在背景区域下方,值大于0时阴影向下方偏移,值小于0时阴影向下方偏移。

全选/反选功能设置
开启: 是否开启控件。开启时显示全选/反选控件,默认不开启
选择器位置: 设置全选/反选按钮在图例区域的位置,可选
起始
和结束
。选择起始
时按钮位于图例开始位置,选择结束
时按钮位于图例尾端。按钮间距: 全选与反选两个按钮之间的距离。值越大两个按钮之间距离越大。
据图例: 全选/反选按钮与图例之间的距离。值越大按钮与图例之间距离越大。
文本标签:
内边距: 按钮文字在控件内上下左右四个边框的距离。值越大距离越高。
背景色: 设置控件的背景色。默认无颜色。
边框色: 设置控件的边框颜色。
边框宽度: 设置控件的边框宽度。值越大边框越宽,值为0时不显示边框。
圆角半径: 设置控件四个方向的圆角。值越大圆角越明显。
阴影颜色: 设置控件的阴影颜色。
阴影大小: 设置控件的阴影模糊效果。值为0时阴影没有模糊效果,值越大阴影效果越明显。
X 轴偏移: 阴影的水平偏移量。值为0时阴影在控件下方,值大于0时阴影向右侧偏移,值小于0时阴影向左侧偏移。
Y 轴偏移: 阴影的垂直偏移量。值为0时阴影在控件下方,值大于0时阴影向下方偏移,值小于0时阴影向下方偏移。
高亮文本标签: 属性设置同 文本标签

分页设置 仅在选择类型为
分页图例
时可配置。按钮间距: 上页与下页两个按钮之间的距离。值越大两个按钮之间距离越大。
距图例: 翻页按钮与图例之间的距离。值越大按钮与图例之间距离越大。
位置: 翻页按钮在图例区域的位置,可选
起始
和结束
。选择起始
时按钮位于图例开始位置,选择结束
时按钮位于图例尾端。翻页按钮与全选/反选按钮位置都设为起始
时,全选/反选按钮在前。翻页按钮与全选/反选按钮位置都设为结束
时,全选/反选按钮在后。按钮颜色: 设置翻页按钮的颜色。
禁按颜色: 设置翻页按钮禁止点击时的颜色。
按钮大小: 设置翻页按钮的大小。值越大按钮越大。
字体颜色: 设置分页字体颜色。
字体大小: 设置分页字体大小。值越大字体越大。
字体粗细: 设置分页字体粗细,可选
普通
、加粗
和更细
。字体: 设置分页字体的样式,可选系统内置字体和自定义字体。

提示框
适用于在用户与图表交互时显示详细的数据信息。
显示: 组件是否显示提示框。
显示类型: 提示框内展示内容的类型,可选
组件
或模版
。2024.3+组件: 选择需要在提示框内展示的组件。禁止选择自身作为提示组件,不允许选在自身的父组件作为提示组件。仅在显示类型为
组件
时可配置。2024.3+模板: 可在模版输入框中输入提示框中内容。支持字符串模板和回调函数两种形式;若当前组件不是图表组件或者地图组件,模版输入框内可以输入html标签。仅在显示类型为
模版
时可配置。- 字符串模板
模板变量有
{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}
(百分比)回调函数
return data;
触发方式: 设置提示框被触发的方式,可选
悬停
、点击
和悬停或点击
。2024.3+悬停: 鼠标指针移动到组件或组件图形上时展示提示框。
点击: 鼠标左键点击组件或组件图形上时展示提示框。
悬停或点击: 悬停或点击二者都可以触发提示框展示。
显示位置: 选择提示框的展示位置,可选
内部中心
、上边
、左边
、下边
和右边
。2024.3+触发点: 提示框显示的触发位置,可选
坐标轴
或数据项
触发。仅在当前组件为图表组件或者地图组件时可设置。坐标轴: 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
数据项: 数据项图形触发,主要在
散点图
、饼图
等无类目轴的图表中使用。
多系列排序: 用来选择系列在提示框内的展示顺序,可选
根据系列升序
、根据系列降序
、根据数据升序
、根据数据降序
。仅在当前组件为图表组件或者地图组件且显示类型为模版
时设置。外观
背景颜色: 设置提示框的背景颜色。
边框颜色: 设置提示框的边框颜色。
边框宽度: 设置提示框的边框宽度。值越大边框越宽。
内边距: 设置提示框上下左右四边与内容之间的距离。值越大距离越大。
文本样式 仅在显示类型为
模版
时可设置。字体颜色: 设置提示框显示内容的字体颜色。
字体大小: 设置提示框显示内容的字体大小。
字体粗细: 设置提示框显示内容的字体粗细,可选
普通
、加粗
、更细
。字体: 设置提示框显示内容的样式,可选系统内置字体和自定义字体

工具栏
为用户提供了一系列便捷的工具,用于与图表进行交互或对图表进行操作。
显示: 组件是否显示功能按钮。
功能按钮
保存为图片按钮: 将当前图表保存为图片。仅在开启工具栏显示且开启当前按钮显示时生效。
还原按钮: 恢复图表的初始状态。仅在开启工具栏显示且开启当前按钮显示时生效。
数据视图按钮: 以表格形式查看图表的数据。仅在开启工具栏显示且开启当前按钮显示时生效。
位置朝向
排列方式: 功能按钮的布局朝向,可选
水平
、垂直
。水平对齐: 功能按钮在水平方向的位置,可选
对齐
、绝对值
和百分比
。对齐: 功能按钮在水平方向对齐方式,可选
左
、中
和右
。绝对值: 功能按钮与组件左上角的水平间距,单位为
px
。百分比: 功能按钮与组件左上角的水平间距,单位为
%
。
垂直对齐: 功能按钮在垂直方向的位置,可选
对齐
、绝对值
和百分比
。对齐: 功能按钮在水平方向对齐方式,可选
上
、中
和下
。绝对值: 功能按钮与组件左上角的垂直间距,单位为
px
。百分比: 功能按钮与组件左上角的垂直间距,单位为
%
。
图表尺寸
图标大小: 功能按钮的大小。值越大,按钮图标越大。
间隔: 功能按钮之间的距离。值越大,按钮之间的距离越大。

数据
静态数据

上图中的示例JSON
代码如下:
[
{
"target": "节点0",
"name": "节点0",
"type": "类目1",
"source": "节点9",
"value": 41
},
{
"target": "节点1",
"name": "节点1",
"type": "类目3",
"source": "节点8",
"value": 34
},
{
"target": "节点2",
"name": "节点2",
"type": "类目1",
"source": "节点8",
"value": 6
},
{
"target": "节点3",
"name": "节点3",
"type": "类目2",
"source": "节点1",
"value": 46
},
{
"target": "节点4",
"name": "节点4",
"type": "类目2",
"source": "节点2",
"value": 49
},
{
"target": "节点5",
"name": "节点5",
"type": "类目3",
"source": "节点16",
"value": 55
},
{
"target": "节点6",
"name": "节点6",
"type": "类目4",
"source": "节点19",
"value": 19
},
{
"target": "节点7",
"name": "节点7",
"type": "类目1",
"source": "节点23",
"value": 37
},
{
"target": "节点8",
"name": "节点8",
"type": "类目2",
"source": "节点16",
"value": 2
},
{
"target": "节点9",
"name": "节点9",
"type": "类目4",
"source": "节点18",
"value": 40
},
{
"target": "节点10",
"name": "节点10",
"type": "类目3",
"source": "节点5",
"value": 57
},
{
"target": "节点11",
"name": "节点11",
"type": "类目3",
"source": "节点2",
"value": 10
},
{
"target": "节点12",
"name": "节点12",
"type": "类目4",
"source": "节点1",
"value": 49
},
{
"target": "节点13",
"name": "节点13",
"type": "类目3",
"source": "节点15",
"value": 32
},
{
"target": "节点14",
"name": "节点14",
"type": "类目4",
"source": "节点23",
"value": 10
},
{
"target": "节点15",
"name": "节点15",
"type": "类目3",
"source": "节点9",
"value": 8
},
{
"target": "节点16",
"name": "节点16",
"type": "类目3",
"source": "节点20",
"value": 26
},
{
"target": "节点17",
"name": "节点17",
"type": "类目4",
"source": "节点14",
"value": 22
},
{
"target": "节点18",
"name": "节点18",
"type": "类目2",
"source": "节点11",
"value": 3
},
{
"target": "节点19",
"name": "节点19",
"type": "类目2",
"source": "节点13",
"value": 25
},
{
"target": "节点20",
"name": "节点20",
"type": "类目2",
"source": "节点25",
"value": 49
},
{
"target": "节点21",
"name": "节点21",
"type": "类目3",
"source": "节点11",
"value": 1
},
{
"target": "节点22",
"name": "节点22",
"type": "类目1",
"source": "节点22",
"value": 7
},
{
"target": "节点23",
"name": "节点23",
"type": "类目2",
"source": "节点1",
"value": 38
},
{
"target": "节点24",
"name": "节点24",
"type": "类目4",
"source": "节点4",
"value": 57
},
{
"target": "节点25",
"name": "节点25",
"type": "类目1",
"source": "节点27",
"value": 17
},
{
"target": "节点26",
"name": "节点26",
"type": "类目3",
"source": "节点20",
"value": 58
},
{
"target": "节点27",
"name": "节点27",
"type": "类目1",
"source": "节点25",
"value": 9
},
{
"target": "节点28",
"name": "节点28",
"type": "类目2",
"source": "节点3",
"value": 57
},
{
"target": "节点29",
"name": "节点29",
"type": "类目1",
"source": "节点17",
"value": 8
}
]
数据资源
选择数据资源: 切换到
数据资源
标签,点击可从数据管理或API中选择相应的数据资源作为组件的数据支撑。
还原默认数据: 点击①处
刷新数据资源。
搜索数据中的字段: 当列表中字段过多时,可通过搜索框搜索列表中的字段。
刷新字段列表: 点击②处
刷新字段列表
字段类型
字符型: 标识符为
A
。数值型: 标识符为
#
。

交互
节点单击事件
勾选启用,开启组件交互功能。当单击关系图的节点时,绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值,触发数据请求,查询相关数据,更新组件。具体配置请参考交互事件。
标记悬停事件
勾选启用,开启组件交互功能。当鼠标悬停标记时,绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值,触发数据请求,查询相关数据,更新组件。具体配置请参考交互事件。
标记移出事件
勾选启用,开启组件交互功能。当鼠标悬停标记时,绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值,触发数据请求,查询相关数据,更新组件。具体配置请参考交互事件。
数据响应
关系图支持数据响应。
节点编程
事件
图表配置转换完成后: 图表 Option 配置转换完成后事件。
- 抛出的参数: 配置完成后的 Option 。
节点单击事件: 节点单击触发事件。
- 抛出的参数: 节点所携带的数据。
标记悬停事件: 标记悬停触发事件。
- 抛出的参数: 节点所携带的数据。
标记移出事件: 标记移出触发事件。
- 抛出的参数: 节点所携带的数据。
动作
导入图表配置: 可导入 Echarts 图表 Option 配置。
- 接收的参数: 修改后的 Option 。