水位图

水位图是一种用于展示百分比数据的可视化形式，通过水波的填充效果直观地表现数据的大小。

属性

基础

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

• 组件尺寸： 组件的宽度和高度，单位为px。

  • 锁定纵横比：：单击切换是否锁定纵横比，锁定时调整组件尺寸保持其宽度与高度的比例不变。 2024.3+

• 组件位置： 组件在大屏中的位置，包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

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

  提示

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

系列

• 图形： 设置水位图的形状。 2025.2+

• 半径： 设置水位图的大小。

• X 坐标： 设置水位图中心的水平位置。

• Y 坐标： 设置水位图中心的垂直位置。

• 背景色： 设置水波的背景颜色。

• 水波设置：

  • 水波弧度： 设置水波的起伏程度。弧度值越大，水波的起伏越明显；弧度值越小，水波越平缓。

  • 水波长度： 设置水波的周期长度。长度值越大，水波的周期越长；长度值越小，水波的周期越短。

  • 波的相位： 设置波的相位显示方式。当有多条数据时，选择“交错”可以更清晰地展示每条数据的波动。选择“平行”则适用于需要同步展示波动的场景。

    • 平行： 所有波的相位一致，波峰和波谷对齐。

    • 交错： 波的相位交错显示，波峰和波谷错开。

  • 移动速度： 设置水波的移动速度，向前移动一个波长所需要的毫秒数。选择“等速”适用于需要统一节奏的场景。选择“不等速”可以增加动态效果的层次感。

    • 等速： 所有数据以相同的速度移动。

    • 不等速： 每条数据的移动速度不同，前面的波速度更快。

  • 波动方向： 设置水波的移动方向。默认为 向右。

    • 向左 所有数据向左移动。

    • 向右 所有数据向右移动。

• 文本标签： 指水位图上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。

  • 显示文本： 设置是否显示文本标签。

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

    字符串模板变量

    • {a} : 系列名。

    • {b} : 数据名。

    • {c} : 数据值。

    示例：

    {a}: {d}

    回调函数

    可用参数为data。

    示例：

    return data.name;

    参数 data是 内容格式器需要的单个数据资源。格式如下：

    {
        // 数据名，类目名
        name: string,
        // 传入的原始数据项
        data: Object,
        // 传入的数据值
        value: number|Array,
    }

  • 遮挡颜色： 设置被水波遮挡部分的文字颜色。当水波经过文本时，被遮挡的部分会显示为该颜色。

  • 字体颜色： 设置文本的显示颜色。

  • 字体大小： 设置文本标签的字体大小。字体大小值越大，文本显示越明显；值越小，文本显示越细腻。

  • 字体粗细： 设置文本标签的字体粗细，可选 普通、更细、加粗。

  • 字体： 设置文本标签字体样式，可选系统内置字体和自定义字体。

  • 水平位置： 设置文本标签的水平位置。

  • 垂直位置： 设置文本标签的垂直位置。

• 图形设置：

  • 渐变色： 点击开启图形渐变色配置。

    • 渐变色方向： 设置图形渐变色的方向，可为 正下到正上、左下到右上 和 右上到左下。

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

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

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

    • 渐变色范围： 设置图形渐变色的颜色范围。

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

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

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

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

  • 阴影范围： 设置水波中阴影的覆盖范围。

  • 阴影颜色： 设置水波中阴影的颜色。

• 轮廓设置：

  • 显示： 设置是否显示水位图外围轮廓。

  • 边界距离： 设置内环与外环之间的距离。距离值越大，内环与外环之间的间隔越宽；值越小，间隔越窄。

  • 颜色： 设置轮廓的颜色。

  • 边框类型： 设置轮廓边框的类型，可选 实线、虚线、点线。

  • 边框宽度： 设置轮廓边框的宽度。宽度值越大，边框越粗；值越小，边框越细。

  • 边框颜色： 设置轮廓边框的颜色。

  • 阴影范围： 设置轮廓外围阴影的覆盖范围。阴影范围值越大，阴影的覆盖区域越广；值越小，阴影的覆盖区域越窄。

  • 阴影颜色： 设置轮廓外围阴影的颜色。

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

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

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

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

标题

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

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

• 内容

  • 标题

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

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

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

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

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

• 位置

  • 水平对齐： 主副标题在水平方向的位置，可选 对齐、绝对值 和 百分比。

    • 对齐： 主副标题在水平方向对齐方式，可选 左、中 和 右。

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

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

  • 垂直对齐： 主副标题在垂直方向的位置，可选 对齐、绝对值 和 百分比。

    • 对齐： 主副标题在水平方向对齐方式，可选 上、中 和 下。

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

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

• 外观

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

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

• 主标题文本样式

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

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

  • 字体粗细： 主标题字体粗细，可选 普通、加粗 和 更细。

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

• 副标题文本样式

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

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

  • 字体粗细： 副标题字体粗细，可选 普通、加粗 和 更细。

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

提示框

• 适用于在用户与图表交互时显示详细的数据信息。

• 显示： 组件是否显示提示框。

• 显示类型： 提示框内展示内容的类型，可选 组件 或 模版。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代码如下：

[
    {
        "value": 34,
        "total": 100
    }
]

• value： 度量，值。
• total： 度量，总值。

若存在多个value值，则水位图显示如下。

数据资源

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

• 还原默认数据： 点击①处刷新数据资源。

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

• 刷新字段列表： 点击②处刷新字段列表

• 字段类型

  • 字符型： 标识符为A。

  • 数值型： 标识符为#。

交互

点击事件

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

数据响应

水位图支持数据响应。

节点编程

事件

• 图表配置转换完成后： 图表 Option 配置转换完成后事件。

  • 抛出的参数： 配置完成后的 Option 。

• 点击事件： 水波单击触发事件。

  • 抛出的参数： 水波所携带的数据。

动作

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

  • 接收的参数： 修改后的 Option 。