Skip to main content

进度条

1 说明

展示当前进度和状态。可额外增加辅助标签，使展示内容更丰富。

2 配置

2.1 数据源​

进度条数据展示元件，需要放置在数据容器中，才能设置进度条的数据源。

2.2 进度条通用样式​

2.2.1 进度标签​

有且只有一个，用来展示进度条当前进度，也即当前值所在位置。

  1. 标签内容可展示为：
  • 百分比 - 当前值加一个“%”
  • 值 - 可配置
  1. 默认颜色/颜色规则指标签内容的样式。目前可设置文本颜色。
  2. 上文本指标签内容上侧的文本内容。默认关闭。开启后可设置文本内容和默认颜色/颜色规则。
  3. 下文本指标签内容下侧的文本内容。默认关闭。开启后可设置文本内容和默认颜色/颜色规则。

2.2.2 辅助标签​

默认没有辅助标签。可添加多个标签。

  1. 标签样式可选：
  • 无
  • 圆形节点
  1. 标签类型可选：
  • 静态可选水平位置。首部表示标签在进度条左侧头部，尾部表示标签在进度条右侧尾部。
  • 动态可选数据库/逻辑/关联关系。此时水平位置可设置值，该值应该在进度条最小值和最大值之间。
  1. 上文本指标签内容上侧的文本内容。默认关闭。开启后可设置文本内容和默认颜色/颜色规则。
  2. 下文本指标签内容下侧的文本内容。默认关闭。开启后可设置文本内容和默认颜色/颜色规则。

2.2.3 进度条颜色​

进度条颜色包括默认颜色和颜色规则。

2.2.4 背景颜色​

进度条背景颜色包括默认颜色和颜色规则。

2.2.5 进度条宽度​

进图条宽度可调整，默认 15px。

2.3 其他配置​

可见性请参考可见性/禁用性设置

样式相关请参考样式配置

高级功能请参考高级函数

3 效果展示

以 CPU 使用率为例，CPU 使用率最小、最大值分别为 0% 和 100%，且在使用率达到 80% 处告警。告警通过改变进度条样式直观显示。

配置数据源当前值、最大值、最小值：

配置进度标签，标签内容展示为百分比，下文本显示“当前 CPU 使用率”，标签颜色默认为黑色，当超过 80% 展示为红色：

配置三个辅助标签，分别为首部尾部的静态标签，用来标识最小值和最大值；和 80% 位置处的告警值，通过动态标签标识。下图为动态标签的配置，其中水平位置为数据源返回的值：

最后，设置了进度条背景色和进度条颜色。

编辑态渲染效果：

预览效果，当 CPU 使用率为 30%，未超过告警值时：

预览效果，当 CPU 使用率为 90%，超过告警值时：