Al analizar la densidad de actividad, tendencias continuas o correlaciones entre dos dimensiones discretas, el Gráfico de mapa de calor proporciona una solución visual potente. Al asignar valores de datos a una escala de color dinámica a través de una cuadrícula bidimensional, los mapas de calor permiten a los usuarios identificar rápidamente horas pico de uso, cuellos de botella estacionales o relaciones matriciales de inmediato, por ejemplo, la carga del servidor por hora y día de la semana, registros de actividad de usuarios o matrices de correlación entre categorías.
La mecánica de los mapas de calor
En Apache ECharts, los mapas de calor utilizan type: 'heatmap' en una cuadrícula cartesiana bidimensional. Cada punto de datos espera un arreglo de 3 elementos con el formato [xAxisIndex, yAxisIndex, value]. Un componente requerido visualMap asigna valores numéricos a una gradación de color continua o por tramos.
1. Configuración esencial
Para crear un gráfico de mapa de calor básico, declare ejes categóricos para ambos ejes horizontal (xAxis) y vertical (yAxis) escalas, pase [xIndex, yIndex, value] arreglos en sus datos de serie, y configure un componente visualMap componente:
const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'];
// Formato de datos: [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: 'Carga del sistema',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Técnicas estructurales avanzadas
Los mapas de calor pueden personalizarse con pasos de color discretos, espacios distintos entre celdas o combinarse con coordenadas de calendario para rastrear la actividad durante un año completo.
1. Mapeo de colores por tramos y separación personalizada de celdas
En lugar de un gradiente de color continuo, utilice un mapeo por tramosvisualMap para agrupar valores en bandas operativas distintas (por ejemplo, Bajo, Medio, Alto):
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['Producto A', 'Producto B', 'Producto C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Alto rendimiento', color: '#16a34a' },
{ min: 40, max: 79, label: 'Moderado', color: '#f59e0b' },
{ max: 39, label: 'Requiere atención', 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
}
}
]
};
Ajuste fino del diseño y los gradientes de color
Elegir paradas de color legibles y habilitar áreas divididas hace que la lectura de cuadrículas matriciales grandes sea sencilla.
1. Personalización de gradientes y alineación de etiquetas
Configure rampas de color personalizadas de múltiples paradas envisualMap.inRange para adaptarse al tema de su plataforma:
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Nodo 1', 'Nodo 2', 'Nodo 3', 'Nodo 4']
},
yAxis: {
type: 'category',
data: ['Servicio X', 'Servicio Y', 'Servicio Z']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // Gradiente azul suave a gris oscuro
}
},
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]
]
}
]
};
Prácticas recomendadas estratégicas
- Incluya siempre un
visualMap:Un mapa de calor sin una leyenda visual obliga a los usuarios a adivinar el significado de los colores. Coloque siempre unvisualMapclaramente cerca del borde del lienzo. - Use bordes de cuadrícula para separación:Aplicar bordes blancos delgados usando
itemStyle.borderColor: '#fff'yborderWidth: 1o2para mantener las celdas individuales visualmente distintas en matrices densas. - Asegúrese de texto de alto contraste: Si las etiquetas numéricas de las celdas están activas (
label.show: true), pruebe que el color del texto permanezca legible frente a los pasos más claros y más oscuros de su gradiente de colores.