Lors de l’analyse de la densité d’activité, des tendances continues ou des corrélations sur deux dimensions discrètes, le Graphique de cartographie thermique fournit une solution visuelle puissante. En cartographiant les valeurs de données sur une échelle de couleur dynamique à travers une grille bidimensionnelle, les cartographies thermiques permettent aux utilisateurs d’identifier instantanément les heures de pointe d’utilisation, les goulets d’étranglement saisonniers ou les relations matricielles instantanément, par exemple la charge du serveur par heure et par jour de la semaine, les journaux d’activité des utilisateurs ou les matrices de corrélation intercatégorielles.
Le fonctionnement des cartographies thermiques
Dans Apache ECharts, les cartographies thermiques utilisent type : 'heatmap' sur une grille cartésienne bidimensionnelle. Chaque point de données attend un tableau à trois éléments formaté comme [indexAxeX, indexAxeY, valeur]. Un composant requis visualMap map les valeurs numériques à un gradient de couleur continu ou par morceaux.
1. Configuration essentielle
Pour créer un graphique de cartographie thermique de base, déclarez des axes catégoriels pour les échelles horizontale (xAxis) et verticale (yAxis) et passez [xIndex, yIndex, valeur] des tableaux dans vos données de série, et configurez un composant visualMap :
const heures = ['12h', '2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h'];
const jours = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'];
// Format des données : [indexAxeX, indexAxeY, valeur]
const donnees = [
[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: heures,
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: jours,
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 60,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Charge du système',
type: 'heatmap',
data: donnees,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Techniques structurelles avancées
Les cartographies thermiques peuvent être personnalisées avec des étapes de couleur discrètes, des espacements distincts entre les cellules, ou combinées avec des coordonnées calendaires pour suivre l’activité sur une année entière.
1. Mappage de couleur par morceaux et espacement personnalisé des cellules
Au lieu d’un dégradé de couleur continu, utilisez un dégradé par morceauxvisualMap pour regrouper les valeurs en bandes opérationnelles distinctes (par exemple : Faible, Moyen, Élevé) :
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'category',
data: ['Produit A', 'Produit B', 'Produit C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Haute performance', color: '#16a34a' },
{ min: 40, max: 79, label: 'Modéré', color: '#f59e0b' },
{ max: 39, label: 'À surveiller', 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
}
}
]
};
Affinage du layout et des dégradés de couleur
Le choix de points de couleur lisibles et l’activation des zones divisées rendent le balayage des grandes grilles matricielles sans effort.
1. Personnalisation du dégradé et alignement des étiquettes
Configurez des rampes de couleur personnalisées à plusieurs points dansvisualMap.inRange pour correspondre au thème de votre plateforme :
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Nœud 1', 'Nœud 2', 'Nœud 3', 'Nœud 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'] // Dégradé doux bleu à bleu foncé
}
},
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]
]
}
]
};
Meilleures pratiques stratégiques
- Incluez toujours un
visualMap:Un heatmap sans légende visuelle oblige les utilisateurs à deviner la signification des couleurs. Placez toujours unvisualMapclairement près du bord du canevas. - Utilisez des bordures de grille pour la séparation :Appliquez des bordures fines blanches en utilisant
itemStyle.borderColor: '#fff'etborderWidth: 1ou2pour maintenir les cellules individuelles visuellement distinctes dans les matrices denses. - Assurez-vous que le texte présente un fort contraste : Si les étiquettes numériques des cellules sont activées (
label.show : true), vérifiez que la couleur du texte reste lisible contre les étapes les plus claires et les plus foncées de votre dégradé de couleurs.