- 分组
- 数据 · 一个值相对上限
- 组件
Gauge·#gauge
适合
- 完成度、预算用量、容量占用
- 有明确的上限或目标
不适合
- 没有上限的数:用 BigStat
- 多个指标:用 KpiBoard
内容上限
| 1 | label ≤ 12 字,unit ≤ 4 字符 |
| 2 | target.label ≤ 10 字 |
| 3 | points 0–3 个:label ≤ 10 字,value ≤ 8 字符 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名,2–8 字 |
title · 必填 | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
value · 必填 | number | 当前值 |
max · 必填 | number | 上限 |
target | { value, label } | 目标刻度 |
unit | string | 单位 |
decimals | number | 小数位 |
label · 必填 | string | 大数字下的说明 |
points | { label, value }[] | 补充数字 |
示例代码
<Gauge
kicker="体积"
title="离预估上限还有余量"
value={6.0}
max={8}
decimals={1}
unit=" MB"
label="当前单文件体积"
target={{ value: 7, label: '预估下限 7 MB' }}
source="…"
/>