При анализе плотности активности, непрерывных тенденций или корреляций по двум дискретным измерениям, График тепловой карты предоставляет мощное визуальное решение. Сопоставляя значения данных с динамической цветовой шкалой на двухмерной сетке, тепловые карты позволяют пользователям мгновенно выявлять пиковые часы использования, сезонные узкие места или матричные взаимосвязи мгновенно — например, нагрузка сервера по часам и дням недели, журналы активности пользователей или матрицы межкатегорийных корреляций.
Механика тепловых карт
В Apache ECharts тепловые карты используют type: 'heatmap' на двухмерной декартовой сетке. Каждая точка данных ожидает массив из 3 элементов в формате [xAxisIndex, yAxisIndex, value]. Обязательный компонент visualMap сопоставляет числовые значения с непрерывной или кусочно-непрерывной цветовой градиентной шкалой.
1. Основная настройка
Чтобы создать базовую тепловую карту, объявите категориальные оси для горизонтальной (xAxis) и вертикальной (yAxis) шкал, передайте [xIndex, yIndex, value] массивы в данные серии и настройте компонент visualMap компонент:
const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
// Формат данных: [xIndex, yIndex, value]
const data = [
[0, 0, 5], [1, 0, 1], [2, 0, 0], [3, 0, 0], [4, 0, 12], [5, 0, 24], [6, 0, 38], [7, 0, 42], [8, 0, 35], [9, 0, 20], [10, 0, 10], [11, 0, 6],
[0, 1, 3], [1, 1, 0], [2, 1, 0], [3, 1, 1], [4, 1, 15], [5, 1, 28], [6, 1, 45], [7, 1, 50], [8, 1, 40], [9, 1, 22], [10, 1, 12], [11, 1, 4],
[0, 2, 2], [1, 2, 1], [2, 2, 0], [3, 2, 0], [4, 2, 11], [5, 2, 26], [6, 2, 41], [7, 2, 48], [8, 2, 38], [9, 2, 19], [10, 2, 8], [11, 2, 3],
[0, 3, 4], [1, 3, 2], [2, 3, 0], [3, 3, 1], [4, 3, 14], [5, 3, 30], [6, 3, 49], [7, 3, 55], [8, 3, 42], [9, 3, 25], [10, 3, 15], [11, 3, 5],
[0, 4, 6], [1, 4, 3], [2, 4, 1], [3, 4, 2], [4, 4, 10], [5, 4, 20], [6, 4, 32], [7, 4, 36], [8, 4, 28], [9, 4, 18], [10, 4, 9], [11, 4, 2]
];
option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: days,
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 60,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Нагрузка системы',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Расширенные структурные техники
Тепловые карты можно настраивать с помощью дискретных цветовых шагов, отдельных промежутков между ячейками или комбинировать с календарными координатами для отслеживания активности в течение полного года.
1. Поэлементное сопоставление цветов и настраиваемые интервалы ячеек
Вместо непрерывного цветового градиента используйте поэлементныйvisualMap для группировки значений в отдельные рабочие диапазоны (например, Низкий, Средний, Высокий):
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['Product A', 'Product B', 'Product C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Высокая производительность', color: '#16a34a' },
{ min: 40, max: 79, label: 'Средний', color: '#f59e0b' },
{ max: 39, label: 'Требует внимания', color: '#dc2626' }
]
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 85], [1, 0, 92], [2, 0, 78], [3, 0, 88],
[0, 1, 45], [1, 1, 55], [2, 1, 62], [3, 1, 35],
[0, 2, 25], [1, 2, 30], [2, 2, 18], [3, 2, 42]
],
label: { show: true },
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Тонкая настройка макета и цветовых градиентов
Выбор читаемых цветовых точек и включение разделённых зон делает крупные матричные сетки легко сканируемыми.
1. Настройка градиента и выравнивание меток
Настройте пользовательские многоступенчатые цветовые градиенты вvisualMap.inRange чтобы соответствовать теме вашей платформы:
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Node 1', 'Node 2', 'Node 3', 'Node 4']
},
yAxis: {
type: 'category',
data: ['Service X', 'Service Y', 'Service Z']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // Мягкий синий к темно-серому градиенту
}
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 12], [1, 0, 45], [2, 0, 78], [3, 0, 95],
[0, 1, 34], [1, 1, 67], [2, 1, 89], [3, 1, 23],
[0, 2, 56], [1, 2, 78], [2, 2, 12], [3, 2, 88]
]
}
]
};
Стратегические лучшие практики
- Всегда включайте
visualMap: Тепловая карта без визуальной легенды заставляет пользователей угадывать, что означают цвета. Всегда размещайте непрерывную или поэлементнуюvisualMapчетко рядом с краем холста. - Используйте границы сетки для разделения: Примените тонкие белые границы с помощью
itemStyle.borderColor: '#fff'иborderWidth: 1или2чтобы отдельные ячейки визуально отличались в плотных матрицах. - Убедитесь, что текст имеет высокую контрастность: Если числовые метки ячеек активны (
label.show: true), проверьте, что цвет текста остается читаемым на фоне как самого светлого, так и самого темного шага в вашей цветовой градиентной шкале.