跳至主要內容

汽车仪表盘

2025年1月14日小于 1 分钟

汽车仪表盘

汽车仪表盘图表是一种模拟汽车仪表盘的可视化形式,通常用于展示关键指标的当前状态或进度。它通过指针、刻度、颜色区域等元素,直观地反映数据的数值范围和目标达成情况。仪表盘图表常用于监控系统、绩效管理和数据报告中。

属性

基础

  • 组件标题: 用于在图层和节点编程中显示组件的名称。修改后在图层和节点编程中搜索组件时按照新标题进行搜索。1.1+

  • 组件尺寸: 组件的宽度和高度,单位为px

    • 锁定纵横比::单击切换是否锁定纵横比,锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+
  • 组件位置: 组件在大屏中的位置,包括组件的横坐标和纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

  • 隐藏时解析: 默认组件设置隐藏后组件不解析,组件配置的数据资源及交互事件,节点编程事件都不会执行。当开启隐藏时解析时,上述功能将执行。

    提示

    隐藏时解析常用于页面中不需要展示组件但要获取相关数据。

系列

  • 系列 1:

  • 半径: 设置仪表盘的半径长短。控制仪表盘的大小。

  • x 坐标: 设置仪表盘的水平位置。控制仪表盘在容器中的水平偏移。

  • y 坐标: 设置仪表盘的垂直位置。控制仪表盘在容器中的垂直偏移。

  • 最小数值: 设置仪表盘的最小数值。定义仪表盘的数值范围起点。

  • 最大数值: 设置仪表盘的最大数值。定义仪表盘的数值范围终点。

  • 起始角度: 设置仪表盘的起始角度。

  • 结束角度: 设置仪表盘的结束角度。

  • 分割段数: 设置仪表盘刻度的分割段数。

  • 轴线:

    • 显示指针: 设置是否显示指针。

    • 两端圆形: 设置轴线两端是否为圆形。

    • 轴线宽: 设置轴线的宽度。

    • 颜色: 设置轴线的颜色,可分段进行设置。

  • 分割线:

    • 显示: 设置是否显示分割线。开启后,分割线会显示在刻度之间。

    • 颜色类型: 设置分割线的颜色类型。选择轴颜色则分割线与轴颜色保持一致。

    • 颜色: 设置分割线的颜色。

    • 宽度: 设置分割线的宽度。

    • 类型: 设置分割线的类型,可选 实线虚线点状线

    • 分隔线长: 设置分割线的长度。

  • 刻度线:

    • 显示: 设置是否显示刻度线。

    • 颜色类型: 设置刻度线的颜色类型。选择轴颜色则刻度线与轴颜色保持一致。

    • 颜色: 设置刻度线颜色。

    • 宽度: 设置刻度线宽度。

    • 类型: 设置刻度线类型,可选 实线虚线点状线

    • 刻度线长: 设置刻度线长度。

    • 间隔刻度: 设置间隔刻度。

  • 刻度标签:

    • 显示: 设置是否显示刻度标签。

    • 内容格式器: 刻度标签的内容格式器,支持字符串模板和回调函数两种形式,回调函数返回的字符串可以用 \n 换行。支持从 HETU 内置函数中获取变量值。2024.5+

      • 字符串模板:模板变量为{value}
       return data.toFixed(0)
      • 回调函数

      • 可用参数:

      data: 刻度默认文本。

      index: 刻度索引。

      return data;
    • 颜色类型: 设置刻度标签字体颜色的类型。选择轴颜色则刻度标签字体颜色与轴颜色保持一致。

    • 字体颜色: 设置刻度标签的字体颜色。

    • 字体大小: 设置刻度标签的字体大小。

    • 字体粗细: 设置刻度标签的字体粗细。

    • 字体: 设置刻度标签的字体样式,可选系统内置字体和自定义字体。

  • 当前进度:

    • 显示进度: 设置是否显示当前进度条。

    • 进度条重叠: 设置多条数据时进度条是否重叠显示。

    • 两端圆形: 设置当前进度条的两端是否为圆形。

    • 超出剪裁: 设置进度条超出轴线时是否剪裁。

    • 宽度: 设置当前进度条的宽度。

    • 渐变色: 设置当前进度条的渐变色。

    • 颜色: 设置当前进度条的颜色。

    • 描边颜色: 设置当前进度条的描边颜色。

    • 描边类型: 设置当前进度条的描边类型,可选 实线虚线点状线

    • 阴影属性: 设置当前进度条的阴影效果。控制进度条的阴影颜色、偏移和模糊效果,增强立体感。

  • 指针:

    • 显示指针: 设置是否显示指针。

    • 指针宽度: 设置指针的宽度。

    • 指针长度: 设置指针的长度。

    • 指针类型: 设置指针的类型。

    • 水平位移: 设置指针的水平位移。控制指针在水平方向上的偏移,调整指针的位置。

    • 垂直位移: 设置指针的垂直位移。控制指针在垂直方向上的偏移,调整指针的位置。

    • 颜色类型: 设置指针颜色的类型。选择轴颜色则指针颜色与轴颜色保持一致。

    • 渐变色: 设置指针是否开启渐变色。

    • 颜色: 设置指针的颜色。

    • 描边颜色: 设置指针的描边颜色。

    • 描边线宽: 设置指针的描边线宽。

    • 描边类型: 设置指针的描边类型,可选 实线虚线点状线

  • 指针固定点:

    • 显示: 设置是否显示指针固定点。

    • 在指针上面: 设置指针固定点是否显示在指针上方。

    • 固定点大小: 设置指针固定点的大小。

    • 固定点类型: 设置指针固定点的类型,可选 矩形圆角矩形三角形菱形图钉形

    • 水平位移: 设置指针固定点的水平位移。控制固定点在水平方向上的偏移,调整固定点的位置。

    • 垂直位移: 设置指针固定点的垂直位移。控制固定点在垂直方向上的偏移,调整固定点的位置。

    • 颜色类型: 设置指针固定点颜色的类型。选择轴颜色则指针固定点颜色与当前进度颜色保持一致。

    • 渐变色: 设置指针固定点是否开启渐变色。

    • 颜色: 设置指针固定点的颜色。

    • 描边颜色: 设置指针固定点的描边颜色。

    • 描边线宽: 设置指针固定点的描边线宽。

    • 描边类型: 设置指针固定点的描边类型,可选 实线虚线点状线

  • 标题样式:

    • 显示: 设置是否显示标题。

    • 颜色类型: 设置标题的字体颜色。

    • 字体大小: 设置标题的字体大小。

    • 字体粗细: 设置标题的字体粗细。

    • 字体: 设置标题字体样式,可选系统内置字体和自定义字体。

    • X 轴偏移: 设置标题的水平偏移。控制标题在水平方向上的位置。

    • Y 轴偏移: 设置标题的垂直偏移。控制标题在垂直方向上的位置。

    • 背景色: 设置标题的背景色。

    • 内边距: 设置标题的内边距。控制标题内容与背景边缘的距离。

    • 边框圆角: 设置标题边框的圆角幅度。控制标题背景的圆角效果。

    • 描边属性: 设置标题边框的颜色、类型和宽度。

    • 阴影属性: 设置标题背景的阴影效果。控制标题背景的阴影颜色、长度、水平偏移和垂直偏移,增强立体感。

    • 描边颜色: 设置标题字体的描边颜色。

    • 描边宽度: 设置标题字体的描边宽度。

    • 文字阴影色: 设置标题字体的阴影颜色。

    • 文字阴影长: 设置标题字体的阴影长度。

  • 数据样式:

    • 显示: 设置是否显示数据样式。

    • 数字动画: 设置是否开启动画效果。

    • 颜色类型: 设置数据字体颜色。

    • 字体大小: 设置数据字体大小。

    • 字体粗细: 设置数据字体粗细。

    • 字体: 设置标题字体样式,可选系统内置字体和自定义字体。

    • 内容格式器: 数据内容,支持字符串模板和回调函数两种形式,回调函数返回的字符串可以用 \n 换行。支持从 HETU 内置函数中获取变量值。2024.5+

    • X 轴偏移: 数据 X 轴偏移。

    • Y 轴偏移: 数据 Y 轴偏移。

    • 背景色: 设置数据背景色。

    • 内边距: 设置数据背景内边距。控制数据内容与背景边缘的距离。

    • 边框圆角: 设置数据背景边框圆角。

    • 描边属性: 设置数据背景边框颜色,类型,宽度。

    • 阴影属性: 设置数据背景阴影,阴影长度,水平偏移,垂直偏移。

    • 描边颜色: 设置数据描边颜色。

    • 描边宽度: 设置数据描边宽度。

    • 文字阴影色: 设置数据文字阴影色。

    • 文字阴影长: 设置数据文字阴影长度。

  • 初始动画: 图表初始化渲染的动画配置。

    • 开启动画: 图表渲染时是否启用动画。开启后图表初始化时展示图形具有动画效果。在性能较弱的终端机器查看大屏页面时建议关闭组件动画以节约性能开销。

    • 动画时长(ms): 设置动画的时长。值越大动画持续时间越长。

    • 缓动效果: 动画的缓动效果。

  • 系列 2/3/4:与系列 1属性配置相同。

标题

  • 标题通常对图表进行概括性说明,包含主标题和副标题。

  • 显示标题: 组件是否显示标题。默认为不显示。

  • 内容

    • 标题

      • 主: 可设置主标题展示的内容。

      • 副: 可设置副标题展示的内容。

    • 超链接: 可对组件标题进行链接配置,实现页面跳转。

      • 主: 配置主标题跳转链接,以打开新窗口的形式进行跳转。仅在开启标题且主标题内容不为空时可用。

      • 副: 配置副标题跳转链接,以打开新窗口的形式进行跳转。仅在开启标题且副标题内容不为空时可用。

  • 位置

    • 水平对齐: 主副标题在水平方向的位置,可选 对齐绝对值百分比

      • 对齐: 主副标题在水平方向对齐方式,可选

      • 绝对值: 主副标题与组件左上角的水平间距,单位为 px

      • 百分比: 主副标题与组件左上角的水平间距,单位为 %

    • 垂直对齐: 主副标题在垂直方向的位置,可选 对齐绝对值百分比

      • 对齐: 主副标题在水平方向对齐方式,可选

      • 绝对值: 主副标题与组件左上角的垂直间距,单位为 px

      • 百分比: 主副标题与组件左上角的垂直间距,单位为 %

  • 外观

    • 内边距: 主副标题距组件上下左右的边距。值越大边距越大。

    • 主副间隔: 主标题与副标题之间的间隔。值越大间隔越大。

  • 主标题文本样式

    • 字体颜色: 可设置主标题文字颜色。默认颜色跟随主题变化。

    • 字体大小: 主标题文字大小。值为正数,值越大字体越大。单位为 px

    • 字体粗细: 主标题字体粗细,可选 普通加粗更细

    • 字体: 主标题字体样式,可选系统内置字体和自定义字体。

  • 副标题文本样式

    • 字体颜色: 可设置副标题文字颜色。默认颜色跟随主题变化。

    • 字体大小: 副标题字体大小。值为正数,值越大字体越大。单位为 px

    • 字体粗细: 副标题字体粗细,可选 普通加粗更细

    • 字体: 副标题字体样式,可选系统内置字体和自定义字体。

图例

  • 图例可以通过颜色、图标等形式标识图表中的不同数据系列,使用户能够快速识别每个系列对应的数据。

  • 用户可以通过点击图例来显示或隐藏对应的数据系列,方便动态调整图表展示的内容。

  • 显示图例: 组件是否显示图例。

  • 选择类型: 设置图例的类型,可选 普通图例分页图例

提示:

设置分页图例时,不一定出现翻页控件。翻页图例出现的条件是,当前图例区域不足以容纳所有图例,一种是图例较多时,一种是当前图例区域较小时,区域大小设置在 区域/位置

  • 选中模式: 设置图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。可选 不可选单选多选

  • 图标: 设置图例展示的图标样式,可选 矩形圆矩形三角形菱形取消图标

  • 图例间距: 设置每两个图例之间的间距。值越大图例间隔越远。

  • 图例宽度: 设置图例图形的宽度。值越大图形越宽。

  • 图例高度: 设置图例图形的高度。值越大图形越高。

  • 内容格式器: 用来格式化图例文本,支持字符串模板和回调函数两种形式。字符串模板可直接使用 enter 按键进行换行,回调函数返回的字符串可以用 \n 换行。支持从 HETU 内置函数中获取变量值。2024.5+

    • 字符串模板: {name}

    • 回调函数: 可直接输入函数体,系统提供了两个参数 dataHETU

      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}

        • 回调函数: 可直接输入函数体,系统提供了两个参数 dataHETU

        return data;
        • 字体颜色: 设置文本标签字体的颜色。

        • 字体大小: 设置文本标签字体的大小。值越大字体越大。

        • 字体粗细: 设置文本标签字体粗细,可选 普通加粗更细

        • 字体: 设置文本标签字体样式,可选系统内置字体与自定义字体。

        • 标签位置: 设置文本标签与轴线的距离。值越大距离越大。

        • 旋转角度: 设置文本标签旋转的角度。

        • 对齐方式: 设置文本标签对齐方式,可选

      • 高亮标签:文本标签

  • 图形样式

    • 渐变色: 点击开启渐变色。

      • 渐变色方向: 每个图形渐变色的方向,可为 正下到正上左下到右上右上到左下

        • 正下到正上: 设置的两个颜色从上至下进行渐变,最上方显示第一个颜色,最下方显示第二个颜色。

        • 左下到右上: 设置的两个颜色从左下角至右上角进行渐变,左下角显示第二个颜色,右上角显示第一个颜色。

        • 右上到左下: 设置的两个颜色从右上角至左下角进行渐变,左下角显示第一个颜色,右上角显示第二个颜色。

      • 渐变色范围: 设置渐变色的颜色范围。

        • 初始颜色: 点击第一个颜色选择器设置渐变色的第一个颜色。

        • 渐变范围: 拖动中滑块设置渐变范围,两侧滑块均可拖动。第一个滑块越靠右,则第一个颜色占比越高。第二个滑块越靠左,则第二个颜色越高。

        • 结束颜色: 点击第一个颜色选择器设置渐变色的第二个颜色。

    • 颜色: 设置图形的颜色,仅在 渐变色 关闭时生效。

    • 描边颜色: 设置图形的描边颜色。

    • 描边线宽: 设置图形的描边宽度。值为正数,值越大描边线越宽。

    • 描边类型: 设置图形描边类型,可选 实线虚线点线

    • 圆角半径: 设置图形的圆角。值为正数,值越大圆角越明显。支持 绝对值百分比 两种数值类型。

    • 阴影属性:

      • 点击设置阴影颜色。

      • 水平: 阴影的水平偏移量。值为0时阴影在组件下方,值大于0时阴影向右侧偏移,值小于0时阴影向左侧偏移。

      • 垂直: 阴影的垂直偏移量。值为0时阴影在组件下方,值大于0时阴影向下方偏移,值小于0时阴影向下方偏移。

      • 模糊: 阴影的模糊程度。值为0时阴影没有模糊效果,值越大阴影效果越明显。

    • 高亮图形:图形样式

    • 完成状态:图形样式

  • 按钮设置

    • 按钮设置: 对时间轴的按钮进行设置,例如播放按钮。

      • 播放按钮: 时间轴是否添加播放按钮控件。默认为开启状态。

      • 前进按钮: 时间轴是否添加前进按钮控件。默认为开启状态。

      • 后退按钮: 时间轴是否添加后退按钮控件。默认为开启状态。

      • 按钮尺寸: 时间轴已添加按钮的大小。值越大按钮越大。

      • 按钮间隔: 按钮之间的距离。值越大距离越大。

      • 颜色: 设置按钮的颜色。

      • 边框颜色: 设置按钮边框线的颜色。

      • 边框宽度: 设置按钮边框线的宽度。值越大边框越宽。

    • 高亮按钮: 高亮按钮是设置按钮高亮的状态。仅对已经添加的按钮生效。

      • 颜色: 高亮按钮的颜色。

      • 边框颜色: 高亮按钮的边框线颜色。

      • 边框线宽: 高亮按钮边框线宽度。

  • 当前按钮设置

    • 标记图形: 设置时间轴上当前时间点显示图形,可选 矩形三角形。默认为圆。

    • 标记大小: 设置当前时间点图标大小。值越大图标越大。

    • 旋转角度: 设置当前时间点图标旋转的角度值。

    • 颜色: 设置当前时间点图形的颜色。

    • 边框颜色: 设置当前时间点图形的边框线颜色。

    • 边框线宽: 设置当前时间点图形的边框线宽度。值越大边框越宽。

    • 开启动画: 播放时组件是否启用动画。

    • 动画时长(ms): 设置动画的持续时间。值越大持续时间越长

    • 缓动效果: 设置动画的缓动效果。

数据

静态数据

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

[
    [
        {
            "value1": 30,
            "name1": "km/h"
        }
    ],
    [
        {
            "value2": 1.5,
            "name2": "x1000 r/min"
        }
    ],
    [
        {
            "value3": 0.5,
            "name3": "gas"
        }
    ],
    [
        {
            "value4": 2,
            "name4": "Water"
        }
    ]
]

数据资源

  • 选择数据资源: 切换到 数据资源 标签,点击可从数据管理或API中选择相应的数据资源作为组件的数据支撑。

  • 还原默认数据: 点击刷新数据资源。

  • 搜索数据中的字段: 当列表中字段过多时,可通过搜索框搜索列表中的字段。

  • 刷新字段列表: 点击刷新字段列表

  • 字段类型

    • 字符型: 标识符为A

    • 数值型: 标识符为#

交互

柱图单击交互事件

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

柱图悬停事件

勾选启用,开启组件交互功能。当悬停柱状图柱子时,绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值,触发数据请求,查询相关数据,更新组件。具体配置请参考交互事件

柱图移出事件

勾选启用,开启组件交互功能。当移出柱状图柱子时,绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值,触发数据请求,查询相关数据,更新组件。具体配置请参考交互事件

X 轴标签单击事件

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

Y 轴标签单击事件

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

数据响应

柱状图支持数据数据响应

数据上卷,下钻

柱状图支持数据上卷、下钻

节点编程

事件

  • 柱图点击事件: 柱子单击触发事件。

    • 抛出的参数: 柱子所携带的数据。
  • 图表配置转换完成后: 图表 Option 配置转换完成后事件。

    • 抛出的参数: 配置完成后的 Option 。
  • 柱图悬停事件: 鼠标悬停到柱图时触发。3.0+

    • 抛出的参数: 柱图所携带的数据。
  • 柱图移出事件: 鼠标移出柱图时触发。3.0+

    • 抛出的参数: 柱图所携带的数据。
  • 图例切换事件: 图表图例切换时触发。3.0+

    • 抛出的参数: 切换的图例名称及选中状态。
  • 时间轴切换事件: 时间轴节点切换时触发。3.0+

    • 抛出的参数: 时间轴节点名称。
  • X 轴/角度轴标签单击事件: X 轴/角度轴标签单击时触发。3.0+

    • 抛出的参数: 标签值。
  • Y 轴/径向轴标签单击事件: Y 轴/径向轴标签单击时触发。3.0+

    • 抛出的参数: 标签值。
  • 伸缩域改变事件: 伸缩区域改变时触发。3.0+

    • 抛出的参数: 开始/结束位置的百分比值。

动作

  • 导入图表配置: 可导入 Echarts 图表 Option 配置。

    • 接收的参数: 修改后的 Option 。
  • 设置图例: 设置图例的选中状态。3.0+

      {
        "类型一": true,
        "类型二": false,
        "类型三": false
      }
  • 设置时间轴: 设置活动的时间轴节点。 3.0+

    • 接受参数: 时间轴节点名称。例如:
      {
        "value": "2021"
      }
上次编辑于: 2025/2/24 01:22:37
贡献者: xuch