栅格进度条

凡拓数创数字孪生 2025年6月3日 14:52

收藏文档

栅格进度条是用于反映指标的组件之一，支持百分比值与真实值两种数值类型的设定，可设置栅格与指标的相关样式，自定义数值区间，智能地展示指标实时的变化情况。
效果案例：
栅格进度条可以通过增加“数值区间”来根据数值变化来改变组件颜色。

![](/media/202506/2025-06-03_144708_4143640.6263031583694605.png)
## 样式
在样式中可以设置组件的基本属性、全局、栅格、指标、区间。
### ①基本属性

![](/media/202506/2025-06-03_144811_1607510.45937740916613257.png)
图层名称：
图层的名称，会在页面左侧展示，允许重复
位置尺寸：
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
### ②全局

![](/media/202506/2025-06-03_145014_8811770.5409793924514569.png)
数值类型：
数值类型分为百分比和真实值两种，切换时进度条会自适应。
启用：
是否启用动画。
动画时长：
开启动画时，设置动画时长。
### ③栅格

![](/media/202506/2025-06-03_145030_6509410.5893078104698702.png)
间距：
每个分段之间的间隔，可以调整间距来调整各分段的疏密。
分段数：
分段的数量。
圆角：
每个分段的圆角。
前景色：
每个分段的前景色。
背景色：
每个分段的背景色。
### ④指标

![](/media/202506/2025-06-03_145046_5064270.42244936465452765.png)
文本样式：
默认指标的文本样式。
保留小数：
默认指标保留几位小数。
偏移：
默认指标的偏移，X表示左偏移距离，Y表示上偏移距离。
背景：

![](/media/202506/2025-06-03_145058_9281760.8536230377670283.png)
默认指标的背景，可以设置背景图、宽度高度、以及XY的偏移值。
后缀：

![](/media/202506/2025-06-03_145108_5458790.4559168646795623.png)
默认指标的后缀，可以设置后缀的文本、后缀的XY偏移值、以及自定义后缀的文本样式。
标签：

![](/media/202506/2025-06-03_145120_4279760.9085016996885118.png)
默认指标的标签，也就是进度条左下角和右下角的刻度，可以设置是否展示标签、标签文本样式、标签XY偏移值以及标签后缀的文本、标签后缀的XY偏移值、以及自定义标签后缀的文本样式
### ⑤区间

![](/media/202506/2025-06-03_145139_0789340.7864752839651902.png)
可以通过设置某个区间范围，来设置在该区间范围内的栅格颜色、指标等样式
范围：
区间范围，精确到小数点后一位。
栅格前景色：
设置在该区间范围内时，栅格的前景色。
指标：
设置在该区间范围内时，指标的文本样式以及背景样式，可以设置文本的字体大小、颜色、粗细等；可以设置指标背景图片、宽度高度、以及XY的偏移值。
## 数据
| 字段    | 说明  |
|-------|-----|
| value | 数值  |
| max   | 最大值 |
| min   | 最小值 |

![](/media/202506/2025-06-03_145211_7293610.4870057501344851.png)