进度条是文字组件的一种,支持自定义进度条的颜色、数值、边框以及提示框文本和位置等,适用于在大屏中直观地展示工作任务的进度情况。本文档为您介绍进度条各配置项的含义,帮助您快速准确地使用进度条组件。
样式
- 基础属性
- 图表尺寸:组件的宽度和高度,单位为px。
- 图表位置:组件在大屏中的位置,通过横纵坐标来定义,单位为px。
- 其他:组件的旋转角度和透明度。
- 全局样式
- 字体:组件中所有文本的字体,默认为微软雅黑。
- 两边间距:进度条与组件左右两侧的距离,单位为px,取值范围为0到100。
- 提示框底部间距:提示框底部和进度条的间距,单位为px,取值范围为-50到50。
- 提示框
- 字号:提示框百分比文本的大小,取值范围为10到100。
- 颜色:提示框百分比文本的颜色,可参考颜色选择器说明进行修改。
- 字体粗细:提示框文本的字体粗细。
- 显示真实值:勾选后,提示框文本显示真实数值;去勾选,提示框文本显示百分比数值。
- 边框隐藏:勾选后,显示提示框百分比数值边框;去勾选,隐藏提示框百分比数值边框。
- 小数点
- 需要小数点:勾选后,提示框内数据显示百分比数值,且精确到小数。
- 保留小数位:保留的小数位数,取值范围为1到4,仅在勾选了需要小数点后显示。
- 百分比条
- 渐变范围:百分比条的渐变类型,可选:全局渐变、局部渐变。
- 开始颜色:百分比条起始位置的颜色。
- 结束颜色:百分比条达到数据占比时的颜色。
- 密度:百分比条占满时总共显示多少个小格子,取值范围为1到50。
- 边框隐藏:勾选后,隐藏百分比条边框;去勾选,显示百分比条边框。
- 总值:进度到达到100%时对应的实际数值。
注意 百分值为(value / 总值),value的值从 数据面板获取。
数据

上图中的示例数据如下:
[
{
"value": "75"
}
]
- value:进度条的具体数值,图中百分比值为该字段值/样式中设置的总值。
交互
此组件没有交互事件。