# 进度条

来源快照：`result_data_new_260518.json`

- 来源 ID：`1184675593723191345`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/数据展示类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

一、

## 功能背景及价值用途

【进度条】主要是将数字展示成进度条的样式，并支持根据不同的进度显示成不同的颜色，支持条形进度条、环形进度条。

二、

## 功能使用说明

### 1、功能入口

【页面设计器】-【组件】-【进度条】-拖拽至设计器内（图1）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549886405967971&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图1）

### 2、基本设置

#### 2.1、分子、分母设置

分子分母支持固定值及动态参数解析

2.1.1、固定值：

分子数值：可为空或为0，为空时默认为0；

分母数值：可为空或为0，为空为0时都会默认为100。（图1）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549753104695309&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图1）

2.1.2、分子分母为动态参数：设置后需在运行页查看配置效果，在运行也进行解析（图2）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549701601902593&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图2）

#### 2.2、显示数值、数据类别

开启显示数值后，出现数据类别设置，支持选择原始值和结果值，原始值显示格式为分子/分母，结果显示格式为a%（图3）

显示数值开启后，预览时展示具体数值，反之未开启时，预览则不展示具体数值（图3）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550320244965473&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图3）

#### 2.3、显示名称

支持设置是否显示名称，开启后可自定义分子分母名称（图4）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550354447523913&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图4）

#### 2.4、进度条颜色

进度条颜色：控制进度条进度的颜色显示，支持添加多个区间，前一个区间的右区间值等于下一个区间的左区间值，进度条颜色会根据数值所在区间显示出对应的颜色。（图5）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550577744707606&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图5）

### 3、进度条组件样式

进度条组件支持切换样式，支持条形图，环形进度条，半圆进度条（图6）

入口：【样式】-【组件】，根据不同的样式类型，可自定义设置不同的样式效果。（图6）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551389663395882&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（图6）

三、

## 上下游关联功能点

1、分子分母支持选择动态参数：系统参数、自定义数据集：

系统参数具体使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159789509534973957&freepass_doc=1&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250")

数据集具体使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1160524116543250563&freepass_doc=1&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478")

2、组件标题和底部使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1159789715744890921&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250")

3、事件动作使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159192088358584536&freepass_doc=1&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693")
