При оценке сложных профилей производительности по нескольким качественным или количественным метрикам одновременно, Диаграмма радаров (или диаграмма паутины) является идеальным инструментом визуализации. Размещая несколько шкал признаков вдоль радиальных осей, исходящих из центральной точки, диаграммы радаров отображают многомерные сравнения в виде различных многоугольных форм. Это делает их подходящими для оценки навыков, карточек оценки поставщиков, эталонов функций продуктов или профилей производительности игроков.
Механика диаграмм радаров
В Apache ECharts диаграммы радаров зависят от специального блока конфигурации radar конфигурационного блока, который определяет радиальные оси, известные как indicator ключи. Объект серии устанавливает type: 'radar' и сопоставляет значения числовых массивов, соответствующих каждой объявленной шкале индикатора.
1. Основная настройка
Чтобы создать базовую диаграмму радаров, определите пороги ваших измерений внутри radar.indicator и передайте числовые массивы в данных серии:
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['Выделенный бюджет', 'Фактические расходы']
},
radar: {
indicator: [
{ name: 'Продажи', max: 6500 },
{ name: 'Администрирование', max: 16000 },
{ name: 'Информационные технологии', max: 30000 },
{ name: 'Поддержка клиентов', max: 38000 },
{ name: 'Разработка', max: 52000 },
{ name: 'Маркетинг', max: 25000 }
]
},
series: [
{
name: 'Бюджет против расходов',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Выделенный бюджет'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Фактические расходы'
}
]
}
]
};
Расширенные структурные техники
Диаграммы радаров можно стилизовать с помощью заполненных многоугольников, круговых сеток или различных цветовых тем, чтобы профили перекрытия было легче читать.
1. Заполнение области многоугольниками с пользовательскими формами сетки
Переключение фона сетки с многоугольника на круг и применение прозрачного заполнения области выделяет общую площадь каждого профиля метрики:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['Модель A', 'Модель B']
},
radar: {
shape: 'circle', // Круглая фоновая сетка
indicator: [
{ name: 'Время работы батареи', max: 100 },
{ name: 'Производительность процессора', max: 100 },
{ name: 'Качество сборки', max: 100 },
{ name: 'Качество дисплея', max: 100 },
{ name: 'Камера', max: 100 },
{ name: 'Стоимость', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: 'Модель A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: 'Модель B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
Настройка макета и стилей
Настройка цвета текста индикаторов, линий разделения и размеров символов предотвращает перегрузку данных многоосевыми линиями сетки.
1. Настройка сетки и форматирование меток веб-интерфейса
Стилизуйте осевые линии, области разделения и внешние метки, чтобы поддерживать четкое визуальное различие на темных или светлых интерфейсах:
option = {
radar: {
indicator: [
{ name: 'Удобство использования', max: 10 },
{ name: 'Производительность', max: 10 },
{ name: 'Безопасность', max: 10 },
{ name: 'Масштабируемость', max: 10 },
{ name: 'Эффективность затрат', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: 'Оценка платформы',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
Стратегические лучшие практики
- Стандартизируйте масштабы осей: Убедитесь, что все индикаторы используют нормированные диапазоны шкал (например, от 0 до 100 или от 1 до 10), насколько это возможно, чтобы внешние области многоугольников отражали сбалансированные сравнения.
- Сохраняйте низкий уровень наложений рядов: Ограничьте количество фигур сравнения на радиограмме до 2 или 3 на график. Наложение 4 или более закрашенных многоугольников затрудняет выделение границ отдельных фигур.
- Используйте заливку с низкой прозрачностью: Всегда применяйте прозрачные заливки (прозрачность около 0,2–0,4), чтобы нижние линии сетки и пересекающиеся профили оставались видимыми под верхними слоями.