Beim Analysieren der Aktivitätsdichte, kontinuierlicher Trends oder Korrelationen über zwei diskrete Dimensionen bietet das Heatmap-Diagramm eine leistungsstarke visuelle Lösung. Durch die Abbildung von Datenwerten auf eine dynamische Farbskala über ein zweidimensionales Gitter ermöglichen Heatmaps es Benutzern, Spitzennutzungszeiten, saisonale Engpässe oder Matrixbeziehungen sofort zu erkennen – beispielsweise Serverlast nach Stunde und Wochentag, Benutzeraktivitätsprotokolle oder Kreuzkategorien-Korrelationsmatrizen.
Die Funktionsweise von Heatmaps
In Apache ECharts verwenden Heatmaps type: 'heatmap' auf einem zweidimensionalen kartesischen Gitter. Jeder Datenpunkt erwartet ein 3-Element-Array im Format [xAxisIndex, yAxisIndex, Wert]. Eine erforderliche visualMapKomponente ordnet numerische Werte einer kontinuierlichen oder stückweisen Farbverlauf zu.
1. Grundlegende Einrichtung
Um ein grundlegendes Heatmap-Diagramm zu erstellen, deklarieren Sie kategoriale Achsen für die horizontale (xAxis) und vertikale (yAxis) Skalen, übergeben Sie [xIndex, yIndex, Wert] Arrays in Ihre Seriendaten und konfigurieren Sie eine visualMapKomponente:
const hours = ['12 Uhr Nacht', '2 Uhr Nacht', '4 Uhr Nacht', '6 Uhr Nacht', '8 Uhr Morgen', '10 Uhr Morgen', '12 Uhr Mittag', '2 Uhr Nachmittag', '4 Uhr Nachmittag', '6 Uhr Nachmittag', '8 Uhr Abend', '10 Uhr Abend'];
const days = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'];
// Datenformat: [xIndex, yIndex, Wert]
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: 'oben'
},
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: 'zentriert',
bottom: '15%'
},
series: [
{
name: 'Systemlast',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Fortgeschrittene strukturelle Techniken
Heatmaps können mit diskreten Farbstufen, deutlich abgesetzten Zellen oder in Kombination mit Kalenderkoordinaten angepasst werden, um Aktivitäten über ein ganzes Jahr hinweg zu verfolgen.
1. Stückweise Farbzuordnung und benutzerdefinierte Zellenabstände
Anstatt eines kontinuierlichen Farbverlaufs verwenden Sie einen stückweisen visualMap um Werte in unterschiedliche Betriebsbereiche zu gruppieren (z. B. Niedrig, Mittel, Hoch):
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['Produkt A', 'Produkt B', 'Produkt C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: 'Hohe Leistung', color: '#16a34a' },
{ min: 40, max: 79, label: 'Mittel', color: '#f59e0b' },
{ max: 39, label: 'Erfordert Aufmerksamkeit', 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
}
}
]
};
Feinabstimmung von Layout und Farbverläufen
Die Auswahl lesbarer Farbstopps und die Aktivierung von geteilten Bereichen erleichtert das problemlose Scannen großer Matrix-Grids.
1. Anpassung von Farbverläufen und Ausrichtung von Beschriftungen
Konfigurieren Sie benutzerdefinierte mehrstufige Farbverläufe in visualMap.inRange um Ihren Plattformthemen anzupassen:
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['Knoten 1', 'Knoten 2', 'Knoten 3', 'Knoten 4']
},
yAxis: {
type: 'category',
data: ['Dienst X', 'Dienst Y', 'Dienst Z']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // Weicher Blau- bis Dunkelgrau-Verlauf
}
},
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]
]
}
]
};
Strategische Best Practices
- Fügen Sie immer eine
visualMap: Eine Heatmap ohne visuelle Legende zwingt Benutzer dazu, zu raten, was die Farben bedeuten. Platzieren Sie immer eine kontinuierliche oder stückweisevisualMapdeutlich am Rand des Canvas. - Verwenden Sie Gitterlinien zur Trennung: Wenden Sie dünne weiße Ränder an mit
itemStyle.borderColor: '#fff'undborderWidth: 1oder2um einzelne Zellen in dichten Matrizen visuell unterscheidbar zu halten. - Stellen Sie hochkontrastischen Text sicher: Wenn numerische Beschriftungen für Zellen aktiv sind (
label.show: true), testen Sie, ob die Textfarbe sowohl gegen die hellsten als auch die dunkelsten Stufen in Ihrer Farbverlaufskurve lesbar bleibt.