當監控單一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: '專案進度'
}
]
}
]
};
戰略性最佳實務
- 保持範圍聚焦：儀錶板佔據顯著的視覺空間以顯示單一指標。僅將其保留給需要立即評估狀態的關鍵高優先級指標。
- 有意義地使用顏色：將閾值顏色帶與通用標準對齊（例如：綠色代表安全，橙色/黃色代表警告，紅色代表危險），讓使用者無需閱讀精確數值即可判斷狀態。
- 考慮無指針環形佈局：對於數位儀錶板與行動螢幕，無指針的弧形進度儀錶通常看起來更乾淨，且佔用的垂直空間比傳統指針式儀錶更少。