При мониторинге одного KPI по отношению к критическим целям или пороговым значениям безопасности, График-измеритель (или график-спидометр) обеспечивает немедленный, легко распознаваемый визуальный сигнал. Отображая одно значение вдоль круговой дуги с указателем и цветовыми зонами состояния, графики-измерители позволяют пользователям оценивать текущую производительность по сравнению с предупредительными порогами и целевыми ограничениями—например, загрузка ЦП сервера, процент завершения проекта, кредитные баллы или скорость транспортного средства.
Принцип работы графиков-измерителей
В Apache ECharts графики-измерители используют type: 'gauge'. В отличие от многосоставных графиков, график-измеритель обычно отображает одно значение или небольшое количество указателей вдоль радиальной дуги. Масштаб оси определяется с помощью min и max свойств, в то время как axisLine.lineStyle.color разделяет периметр дуги на отдельные зоны предупреждения (например, зелёный, жёлтый, красный).
1. Основная настройка
Чтобы создать базовый график-измеритель, установите min, max, и укажите одно значение в массиве данных серии data массив:
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: 'Состояние системы',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}%'
},
data: [
{
value: 70,
name: 'Загрузка ЦП'
}
]
}
]
};
Расширенные структурные методы
Графики-измерители можно стилизовать с помощью многоцветных полос оси, пользовательских заполнений прогресса или нескольких указателей для сравнения фактических и целевых значений на одном циферблате.
1. Цветные полосы пороговых значений и пользовательские указатели
Определите явные цветовые остановки вдоль круговой оси с помощьюaxisLine.lineStyle.color чтобы отметить зоны предупреждения (например, Безопасно, Предупреждение, Критично):
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} км/ч',
color: 'inherit'
},
data: [
{
value: 80,
name: 'Скорость'
}
]
}
]
};
Тонкая настройка макета и центральных метрик
Применение современных закруглённых прогрессивных колец и пользовательской типографии центральных меток превращает стандартные измерители в элегантные карточки панели мониторинга.
1. Элегантный кольцевой измеритель с отображением центральной метки
Скрыть традиционные стрелки и использовать толстое закруглённое прогрессивное кольцо в паре с крупным центрированным текстом для создания чистого современного компонента интерфейса:
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: 'Ход проекта'
}
]
}
]
};
Стратегические лучшие практики
- Сохраняйте фокус на задаче:Измерители занимают значительное визуальное пространство для отображения одной метрики. Выделяйте их для ключевых метрик высокого приоритета, требующих немедленной оценки состояния.
- Используйте цвет осмысленно:Согласуйте цветовые полосы пороговых значений с универсальными стандартами (например, зелёный — безопасно, оранжевый/жёлтый — осторожно, красный — опасно), чтобы пользователи могли оценить состояние, не читая точные значения.
- Рассмотрите компоновку без указателя:Для цифровых панелей мониторинга и мобильных экранов кольцевые прогрессивные измерители без указателя часто выглядят чище и занимают меньше вертикального пространства по сравнению с традиционными измерителями со стрелками.