Khi theo dõi các KPI đơn lẻ so với các mục tiêu quan trọng hoặc ngưỡng an toàn vận hành, thìBiểu đồ đồng hồ (hay còn gọi là biểu đồ đồng hồ tốc độ) cung cấp một tín hiệu thị giác ngay lập tức, dễ nhận biết. Bằng cách biểu diễn một giá trị duy nhất dọc theo một cung tròn với kim chỉ và các vùng trạng thái được mã màu, biểu đồ đồng hồ cho phép người dùng đánh giáhiệu suất hiện tại so với ngưỡng cảnh báo và giới hạn mục tiêu—ví dụ như tải CPU máy chủ, tỷ lệ hoàn thành dự án, điểm tín dụng hoặc tốc độ phương tiện.
Cơ chế hoạt động của biểu đồ đồng hồ
Trong Apache ECharts, biểu đồ đồng hồ sử dụngtype: 'gauge'. Khác với các biểu đồ đa thể loại, biểu đồ đồng hồ thường hiển thị một giá trị duy nhất hoặc một tập hợp nhỏ các kim chỉ dọc theo cung bán kính. Thang trục được xác định bằng cách sử dụngmin và max thuộc tính, trong khiaxisLine.lineStyle.colorchia cung viền thành các dải cảnh báo riêng biệt (ví dụ: xanh, vàng, đỏ).
1. Cài đặt cơ bản
Để xây dựng một biểu đồ đồng hồ cơ bản, hãy thiết lậpmin, max, và cung cấp một mục giá trị duy nhất bên trong mảng dữ liệu của chuỗidatamảng:
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'Sức khỏe hệ thống',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'Tải CPU'
}
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ đồng hồ có thể được định dạng với các dải trục nhiều màu, điền màu tiến độ tùy chỉnh, hoặc nhiều kim chỉ để so sánh giá trị thực tế với giá trị mục tiêu trên một mặt đồng hồ duy nhất.
1. Các dải ngưỡng mã màu và các chỉ thị tùy chỉnh
Xác định các điểm dừng màu rõ ràng dọc theo trục hình tròn bằng cách sử dụngaxisLine.lineStyle.colorđể đánh dấu các khu vực cảnh báo (ví dụ: An toàn, Cảnh báo, Nguy hiểm):
option = {
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'], // Xanh lá đến 30%
[0.7, '#e6a23c'], // Cam đến 70%
[1, '#f56c6c'] // Đỏ đến 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: 'Tốc độ'
}
]
}
]
};
Tinh chỉnh bố cục và các chỉ số trung tâm
Áp dụng các vành đai tiến độ bo tròn hiện đại và kiểu chữ nhãn trung tâm tùy chỉnh biến đồng hồ đo tiêu chuẩn thành các thẻ bảng điều khiển tinh tế.
1. Đồng hồ đo vành tròn tinh tế với hiển thị nhãn trung tâm
Ẩn các kim truyền thống và sử dụng một vành đai tiến độ bo tròn dày kết hợp với văn bản lớn ở trung tâm để tạo thành một thành phần giao diện người dùng sạch sẽ, hiện đại:
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 // Ẩn kim chỉ để hiển thị vành tròn sạch sẽ
},
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: 'Tiến độ Dự án'
}
]
}
]
};
Các thực hành tốt chiến lược
- Giữ phạm vi tập trung:Đồng hồ đo chiếm không gian thị giác đáng kể để hiển thị một chỉ số duy nhất. Dành chúng cho các chỉ số quan trọng, ưu tiên cao cần đánh giá trạng thái ngay lập tức.
- Sử dụng màu sắc một cách ý nghĩa:Cân bằng các dải màu ngưỡng với các tiêu chuẩn phổ biến (ví dụ: xanh cho an toàn, cam/vàng cho cảnh báo, đỏ cho nguy hiểm) để người dùng có thể đánh giá trạng thái mà không cần đọc chính xác các con số.
- Xem xét bố cục vành tròn không có kim chỉ:Đối với bảng điều khiển kỹ thuật số và màn hình di động, các đồng hồ đo tiến độ cung không có kim thường trông sạch sẽ hơn và chiếm ít chiều cao dọc hơn so với các đồng hồ kim truyền thống.