Ao analisar a densidade de atividade, tendências contínuas ou correlações em duas dimensões discretas, o Gráfico de Mapa de Calor fornece uma solução visual poderosa. Ao mapear valores de dados em uma escala de cor dinâmica em uma grade bidimensional, os mapas de calor permitem que os usuários identifiquem horários de pico de uso, gargalos sazonais ou relações matriciaisinstantaneamente—como a carga do servidor por hora e dia da semana, registros de atividade de usuários ou matrizes de correlação entre categorias.
O Funcionamento dos Mapas de Calor
No Apache ECharts, os mapas de calor usam type: 'heatmap' em uma grade cartesiana bidimensional. Cada ponto de dados espera um array de 3 elementos formatado como [xAxisIndex, yAxisIndex, value]. Um componente obrigatório visualMap mapeia valores numéricos para uma escala de cor contínua ou por partes.
1. Configuração Básica
Para criar um gráfico de mapa de calor básico, declare eixos categóricos para as escalas horizontal (xAxis) e vertical (yAxis) e passe [xIndex, yIndex, value] arrays para seus dados de série e configure um componente visualMap componente:
const horas = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const dias = ['Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira'];
// Formato dos dados: [xIndex, yIndex, value]
const dados = [
[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]
];
opcao = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: horas,
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: dias,
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 60,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Carga do Sistema',
type: 'heatmap',
data: dados,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Técnicas Estruturais Avançadas
Mapas de calor podem ser personalizados com etapas de cor discretas, espaçamentos distintos entre células ou combinados com coordenadas de calendário para rastrear atividades ao longo de um ano inteiro.
1. Mapeamento de Cores por Trechos e Espaçamento Personalizado de Células
Em vez de um gradiente de cor contínuo, use um visualMap para agrupar valores em faixas operacionais distintas (por exemplo, Baixo, Médio, Alto):
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['Produto A', 'Produto B', 'Produto C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Alto Desempenho', color: '#16a34a' },
{ min: 40, max: 79, label: 'Moderado', color: '#f59e0b' },
{ max: 39, label: 'Requer Atenção', 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 do Layout e dos Gradientes de Cor
Escolher paradas de cor legíveis e habilitar áreas divididas torna a leitura de matrizes grandes fácil e intuitiva.
1. Personalização de Gradiente e Alinhamento de Rótulos
Configure rampas de cor personalizadas com múltiplas paradas em visualMap.inRange para corresponder ao tema da sua plataforma:
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Nó 1', 'Nó 2', 'Nó 3', 'Nó 4']
},
yAxis: {
type: 'category',
data: ['Serviço X', 'Serviço Y', 'Serviço Z']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // Gradiente suave azul para cinza-escuro
}
},
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]
]
}
]
};
Melhores Práticas Estratégicas
- Sempre inclua um
visualMap: Um heatmap sem uma legenda visual força os usuários a adivinhar o significado das cores. Sempre posicione umvisualMapclaramente próximo à borda da área de desenho. - Use bordas de grade para separação: Aplique bordas finas brancas usando
itemStyle.borderColor: '#fff'eborderWidth: 1ou2para manter as células individuais visualmente distintas em matrizes densas. - Garanta texto com alto contraste: Se rótulos numéricos das células estiverem ativos (
label.show: true), teste se a cor do texto permanece legível contra os tons mais claros e mais escuros na sua escala de cores.