仪表盘
单指标区间状态。建议英文标识：GaugeChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.gauge-chart |
| 名称 | 仪表盘 |
| 二级分类 | 图表（charts） |
| 用途 | 单指标区间状态 |
| 描述 | 建议英文标识：GaugeChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="gauge-chart">；环形进度表（210° 到 -30°），中心大字数值 + 单位；thresholds 按量程分段配色。
DSL 结构
{
"type": "GaugeChart",
"props": {
"value": 72,
"min": 0,
"max": 100,
"unit": "%",
"thresholds": [
{
"value": 60,
"color": "var(--success)"
},
{
"value": 90,
"color": "var(--warning)"
},
{
"value": 100,
"color": "var(--destructive)"
}
]
}
}何时用
何时使用
- 单指标的区间状态（CPU 负载、完成率、健康分）。
何时不用
- 多指标对比：用 MetricCard 组或柱图。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单阈值段 | 单色进度弧 | 无分档诉求的完成度 |
| 多阈值段 | 轴弧按阈值分段变色 | 负载 / 健康度分档 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | 0 | 当前值 |
min / max | number | 0 / 100 | 量程 |
thresholds | { value: number; color?: string }[] | — | 阈值区间：按 value 上限分段配色，末段兜底 max |
unit | string | — | 数值单位后缀（如 %） |
title / height / onSelect | — | — | 标题 / 高度 / 点击事件 |
使用规范
- 阈值配色走语义色（success / warning / destructive）。
- 单页仪表盘 ≤ 4 个，避免表盘墙。
正例
- ✓ 服务健康度：0-60 绿、60-90 黄、90-100 红，中心显示当前百分比。
反例
- ✕ 用仪表盘展示精确数值比较（表盘读数精度低）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。