在监控单一关键绩效指标（KPI）与关键目标或运营安全阈值时，仪表图（或称速度计图）能提供即时且高度可识别的视觉提示。通过将单一数值映射到带有指针和颜色编码状态区域的圆形弧线上，仪表图使用户能够评估当前表现与警告阈值及目标限值——例如服务器CPU负载、项目完成百分比、信用评分或车辆速度。
仪表图的工作原理
在 Apache ECharts 中，仪表图使用type: 'gauge'。与多类别图表不同，仪表图通常在径向弧线上显示单一数值或少量指针。轴刻度通过min和max属性定义，而axisLine.lineStyle.color将外围弧线划分为不同的警告区域（例如绿色、黄色、红色）。
1. 基础设置
要构建一个基本的仪表图，请设置min, max，并在你的系列data数组中提供一个单一数值条目：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: '系统健康',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'CPU负载'
}
]
}
]
};
高级结构技术
仪表图可以通过多色轴带、自定义进度填充或多个指针进行样式设计，以在单个刻度盘上比较实际值与目标值。
1. 颜色编码的阈值带和自定义指针
使用以下方式在圆形轴上定义明确的颜色停靠点：axisLine.lineStyle.color以标记警告区域（例如：安全、警告、严重）：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // 绿色，最高达30%
[0.7, '#e6a23c'], // 橙色，最高达70%
[1, '#f56c6c'] // 红色，最高达100%
]
}
},
pointer: {
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -20,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
distance: -20,
length: 20,
lineStyle: {
color: '#fff',
width: 4
}
},
axisLabel: {
color: 'inherit',
distance: 25,
fontSize: 14
},
detail: {
valueAnimation: true,
formatter: '{value} km/h',
color: 'inherit'
},
data: [
{
value: 80,
name: '速度'
}
]
}
]
};
微调布局与中心指标
应用现代圆角进度环和自定义中心标签字体，可将标准仪表盘转化为简洁的仪表板卡片。
1. 带中心标签显示的简洁环形仪表
隐藏传统指针，使用粗厚的圆角进度环搭配大号居中文字，打造简洁现代的 UI 组件：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 5,
itemStyle: {
color: '#5470c6',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 18
},
pointer: {
show: false // 隐藏指针以实现干净的环形显示
},
axisLine: {
roundCap: true,
lineStyle: {
width: 18
}
},
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
title: {
offsetCenter: [0, '20%'],
fontSize: 14,
color: '#666'
},
detail: {
offsetCenter: [0, '-10%'],
valueAnimation: true,
formatter: '{value}%',
fontSize: 32,
fontWeight: 'bold',
color: '#333'
},
data: [
{
value: 78,
name: '项目进度'
}
]
}
]
};
战略最佳实践
- 保持范围聚焦：仪表盘占用大量视觉空间以显示单一指标。应仅将它们用于需要立即评估状态的关键高优先级指标。
- 有意义地使用颜色：将阈值颜色带与通用标准对齐（例如：绿色表示安全，橙色/黄色表示警告，红色表示危险），以便用户无需阅读具体数值即可评估状态。
- 考虑无指针环形布局：对于数字仪表盘和移动屏幕，无指针的弧形进度仪表通常看起来更简洁，且占用的垂直空间比传统指针式仪表更少。