桑基图

2025年1月14日大约 3 分钟

桑基图

桑基图是一种特殊的流图（可以看作是有向无环图）。它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。

属性

基础

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

系列颜色： 图形的颜色。可添加选择颜色显示，默认情况下图形节点的颜色为主题的颜色。

系列

树图布局： 设置树图的布局方向，可选 水平布局、垂直布局。
对齐方式： 设置组件的对齐方式。
- 两端对齐： 节点在组件内两端对齐，中间节点均匀分布。
- 左对齐： 节点在组件内左侧对齐。
- 右对齐： 节点在组件内右侧对齐。
节点宽度： 设置组件中各节点的宽度。
节点间隔： 设置组件中各节点之间的间隔。
允许拖拽： 设置组件节点是否可拖拽。
关闭鼠标事件： 设置是否关闭鼠标事件，关闭鼠标事件后不能与组件交互。

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

普通状态
- 文本标签： 设置图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
  - 显示： 设置是否显示图形上的文本标签，其余配置均在显示标签时生效。
  - 内容格式器： 设置文本标签显示内容。支持 字符串模板 和 回调函数 两种形式。字符串模板可直接使用 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时阴影没有模糊效果，值越大阴影效果越明显。

线样式
- 颜色来源： 设置线颜色的来源，决定是否根据数据区分线样式。
- 来源
  - 源节点： 线的颜色由源节点的属性决定。
  - 目标节点： 线的颜色由目标节点的属性决定。
  - 渐变过渡色： 线的颜色由源节点到目标节点的渐变过渡色决定。
- 曲度： 设置线的曲度，控制线的弯曲程度。
- 透明度： 设置线的透明度。值为 0 - 1 之间的数值（0 表示完全透明，1 表示完全不透明）。

高亮状态： 鼠标放到树节点上时高亮的标记和样式。
- 聚焦效果： 鼠标放置在树节点时树节点高亮显示（聚焦当前所在系列）。
- 其余属性配置与普通状态相同。
选中状态： 选中状态下树节点的样式，选择模式为单选或多选时生效。
- 选择模式： 设置图表的交互选择模式，可选 不可选、单选、多选。
- 其余属性配置与普通状态相同。
层级样式：
- 针对每一个层进行配置，其优先级小于- 普通状态、- 高亮状态、- 选中状态。
- 指定层级： 设置需要配置的层级。
- 普通状态： 其属性配置与普通状态相同。
- 高亮状态： 其属性配置与高亮状态相同。
- 选中状态： 其属性配置与选中状态相同。

初始动画： 图表初始化渲染的动画配置。
- 开启动画： 图表渲染时是否启用动画。开启后图表初始化时展示图形具有动画效果。在性能较弱的终端机器查看大屏页面时建议关闭组件动画以节约性能开销。
- 动画时长(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。
  - 百分比： 功能按钮与组件左上角的垂直间距，单位为 %。
图表尺寸
- 图标大小： 功能按钮的大小。值越大，按钮图标越大。
- 间隔： 功能按钮之间的距离。值越大，按钮之间的距离越大。

时间轴

用于展示时间序列数据，用户可以通过滑动或点击时间轴上的节点，查看不同时间点的数据状态。
显示： 是否开启时间轴，组件初始化不开启时间轴。开启后需在数据配置面板添加对应的时间轴字段配置。
轴的类型： 设置时间轴数据类型，可选 数值轴、类目轴、时间轴。设置为 时间轴 时，组件会对值进行时间格式转换。
当前选中项： 设置默认选中时间轴的数据项。值为数据索引。
自动播放： 设置是否自动播放。开启后组件渲染完成会自动切换数据。
循环播放： 设置是否循环播放。开启后当播放到最后一组数据时继续从第一组数据开始播放。
反向播放： 设置是否反向播放。开启后数据从后至前进行播放。
拖拽更新： 设置是否可以拖拽改变时间点。开启后可用鼠标拖拽轴线上的时间点进行更新组件。
反向放置： 设置进度条是否反向放置。开启后进度条从后至前渲染数据。
时间间隔： 设置时间轴自动播放的时间间隔。值越大，间隔时间越长。
摆放方式： 设置时间轴摆放方式，可选 水平、垂直两个方向。
左边距： 设置时间轴与组件左边的距离，可选 自适应、绝对值、百分比。
右边距： 设置时间轴与组件右边的距离，可选 自适应、绝对值、百分比。
上边距： 设置时间轴与组件上边的距离，可选 自适应、绝对值、百分比。
下边距： 设置时间轴与组件下边的距离，可选 自适应、绝对值、百分比。
标记图形： 设置时间轴轴线上时间点的显示图形，可选 无、圆、矩形、三角形。默认为圆。
标记大小： 设置时间轴轴线上时间点图形的大小。值越大图形越大。
旋转角度： 设置时间轴轴线上时间点图形的旋转角度值。

轴线
- 普通状态
  - 显示： 设置是否显示时间轴的轴线。默认为开启状态。
  - 颜色： 设置轴线的颜色。
  - 宽度： 设置轴线的宽度。值越大轴线越宽，默认轴线宽度为1
  - 类型： 设置轴线样式，可选 实线、虚线、点状线。
- 完成状态4.5+
  - 颜色： 设置播放完成后轴线的颜色。
  - 宽度： 设置播放完成后轴线的宽度。值越大轴线越宽，默认轴线宽度为1
  - 类型： 设置播放完成后轴线样式，可选 实线、虚线、点状线。

文本标签
- 文本标签： 设置时间轴的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
  - 显示： 时间轴上时间点是否显示文本标签。默认为开启状态。
  - 内容格式器： 用来格式化时间轴文本，支持字符串模板和回调函数两种形式。字符串模板可直接使用 enter 按键进行换行，回调函数返回的字符串可以用 \n 换行。支持从 HETU 内置函数中获取变量值。2024.5+
    - 字符串模板： {name}
    - 回调函数： 可直接输入函数体，系统提供了两个参数 data 和 HETU。
```
return data;
```
    - 字体颜色： 设置文本标签字体的颜色。
    - 字体大小： 设置文本标签字体的大小。值越大字体越大。
    - 字体粗细： 设置文本标签字体粗细，可选 普通、加粗、更细。
    - 字体： 设置文本标签字体样式，可选系统内置字体与自定义字体。
    - 标签位置： 设置文本标签与轴线的距离。值越大距离越大。
    - 旋转角度： 设置文本标签旋转的角度。
    - 对齐方式： 设置文本标签对齐方式，可选 左、中、右。
  - 高亮标签： 同 文本标签

图形样式
- 渐变色： 点击开启渐变色。
  - 渐变色方向： 每个图形渐变色的方向，可为 正下到正上、左下到右上 和 右上到左下。
    - 正下到正上： 设置的两个颜色从上至下进行渐变，最上方显示第一个颜色，最下方显示第二个颜色。
    - 左下到右上： 设置的两个颜色从左下角至右上角进行渐变，左下角显示第二个颜色，右上角显示第一个颜色。
    - 右上到左下： 设置的两个颜色从右上角至左下角进行渐变，左下角显示第一个颜色，右上角显示第二个颜色。
  - 渐变色范围： 设置渐变色的颜色范围。
    - 初始颜色： 点击第一个颜色选择器设置渐变色的第一个颜色。
    - 渐变范围： 拖动中滑块设置渐变范围，两侧滑块均可拖动。第一个滑块越靠右，则第一个颜色占比越高。第二个滑块越靠左，则第二个颜色越高。
    - 结束颜色： 点击第一个颜色选择器设置渐变色的第二个颜色。
- 颜色： 设置图形的颜色，仅在 渐变色 关闭时生效。
- 描边颜色： 设置图形的描边颜色。
- 描边线宽： 设置图形的描边宽度。值为正数，值越大描边线越宽。
- 描边类型： 设置图形描边类型，可选 实线、虚线 和 点线。
- 圆角半径： 设置图形的圆角。值为正数，值越大圆角越明显。支持 绝对值 和 百分比 两种数值类型。
- 阴影属性：
  - 点击设置阴影颜色。
  - 水平： 阴影的水平偏移量。值为0时阴影在组件下方，值大于0时阴影向右侧偏移，值小于0时阴影向左侧偏移。
  - 垂直： 阴影的垂直偏移量。值为0时阴影在组件下方，值大于0时阴影向下方偏移，值小于0时阴影向下方偏移。
  - 模糊： 阴影的模糊程度。值为0时阴影没有模糊效果，值越大阴影效果越明显。
- 高亮图形： 同 图形样式
- 完成状态： 同 图形样式

按钮设置
- 按钮设置： 对时间轴的按钮进行设置，例如播放按钮。
  - 播放按钮： 时间轴是否添加播放按钮控件。默认为开启状态。
  - 前进按钮： 时间轴是否添加前进按钮控件。默认为开启状态。
  - 后退按钮： 时间轴是否添加后退按钮控件。默认为开启状态。
  - 按钮尺寸： 时间轴已添加按钮的大小。值越大按钮越大。
  - 按钮间隔： 按钮之间的距离。值越大距离越大。
  - 颜色： 设置按钮的颜色。
  - 边框颜色： 设置按钮边框线的颜色。
  - 边框宽度： 设置按钮边框线的宽度。值越大边框越宽。
- 高亮按钮： 高亮按钮是设置按钮高亮的状态。仅对已经添加的按钮生效。
  - 颜色： 高亮按钮的颜色。
  - 边框颜色： 高亮按钮的边框线颜色。
  - 边框线宽： 高亮按钮边框线宽度。

当前按钮设置
- 标记图形： 设置时间轴上当前时间点显示图形，可选 无、圆、矩形、三角形。默认为圆。
- 标记大小： 设置当前时间点图标大小。值越大图标越大。
- 旋转角度： 设置当前时间点图标旋转的角度值。
- 颜色： 设置当前时间点图形的颜色。
- 边框颜色： 设置当前时间点图形的边框线颜色。
- 边框线宽： 设置当前时间点图形的边框线宽度。值越大边框越宽。
- 开启动画： 播放时组件是否启用动画。
- 动画时长(ms)： 设置动画的持续时间。值越大持续时间越长
- 缓动效果： 设置动画的缓动效果。

数据

静态数据

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

[
  {
    "name": "a",
    "source": "a",
    "target": "a1",
    "dataValue": 20,
    "linkValue": 5
  },
  {
    "name": "b",
    "source": "a",
    "target": "a2",
    "dataValue": 50,
    "linkValue": 20
  },
  {
    "name": "a1",
    "source": "b",
    "target": "b1",
    "dataValue": 10,
    "linkValue": 8
  },
  {
    "name": "a2",
    "source": "a",
    "target": "b1",
    "dataValue": 30,
    "linkValue": 3
  },
  {
    "name": "b1",
    "source": "b1",
    "target": "a1",
    "dataValue": 20,
    "linkValue": 5
  },
  {
    "name": "c",
    "source": "b1",
    "target": "c",
    "dataValue": 22,
    "linkValue": 2
  }
]