进度条是文字组件的一种,支持自定义进度条的颜色、数值、边框以及提示框文本和位置等,适用于在大屏中直观地展示工作任务的进度情况。本文档为您介绍进度条各配置项的含义,帮助您快速准确地使用进度条组件。

样式

  • 基础属性
    • 图表尺寸:组件的宽度和高度,单位为px。
    • 图表位置:组件在大屏中的位置,通过横纵坐标来定义,单位为px。
    • 其他:组件的旋转角度和透明度。
  • 全局样式

    • 字体:组件中所有文本的字体,默认为微软雅黑
    • 两边间距:进度条与组件左右两侧的距离,单位为px,取值范围为0到100。
    • 提示框底部间距:提示框底部和进度条的间距,单位为px,取值范围为-50到50。
  • 提示框

    • 字号:提示框百分比文本的大小,取值范围为10到100。
    • 颜色:提示框百分比文本的颜色,可参考颜色选择器说明进行修改。
    • 字体粗细:提示框文本的字体粗细。
    • 显示真实值:勾选后,提示框文本显示真实数值;去勾选,提示框文本显示百分比数值。
    • 边框隐藏:勾选后,显示提示框百分比数值边框;去勾选,隐藏提示框百分比数值边框。
    • 小数点
      • 需要小数点:勾选后,提示框内数据显示百分比数值,且精确到小数。
      • 保留小数位:保留的小数位数,取值范围为1到4,仅在勾选了需要小数点后显示。
  • 百分比条

    • 渐变范围:百分比条的渐变类型,可选:全局渐变、局部渐变。
    • 开始颜色:百分比条起始位置的颜色。
    • 结束颜色:百分比条达到数据占比时的颜色。
    • 密度:百分比条占满时总共显示多少个小格子,取值范围为1到50。
    • 边框隐藏:勾选后,隐藏百分比条边框;去勾选,显示百分比条边框。
  • 总值:进度到达到100%时对应的实际数值。
    注意 百分值为(value / 总值),value的值从 数据面板获取。

数据



上图中的示例数据如下:
[
  {
    "value": "75"
  }
]
  • value:进度条的具体数值,图中百分比值为该字段值/样式中设置的总值

交互

此组件没有交互事件。