← 全部模板

仪表盘 <Gauge />

240° 的表盘,强调色填到当前值,可加一个目标刻度;中间是大数字。右边可放 2–3 个补充数字。

分组
数据 · 一个值相对上限
组件
Gauge · #gauge

适合

  • 完成度、预算用量、容量占用
  • 有明确的上限或目标

不适合

  • 没有上限的数:用 BigStat
  • 多个指标:用 KpiBoard

内容上限

1label ≤ 12 字,unit ≤ 4 字符
2target.label ≤ 10 字
3points 0–3 个:label ≤ 10 字,value ≤ 8 字符

字段

字段类型
kicker · 必填string小节名,2–8 字
title · 必填string | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
value · 必填number当前值
max · 必填number上限
target{ value, label }目标刻度
unitstring单位
decimalsnumber小数位
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="…"
/>