关系图

2025年1月14日大约 3 分钟

关系图

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

属性

基础

组件标题： 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。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": "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
    }
]