Wenn mehrstufige hierarchische Datensätze präsentiert oder große visuelle Aufteilungen dargestellt werden, bei denen Platz knapp ist, bietet das Treemap-Diagramm eine effiziente visuelle Lösung. Durch die Anordnung verschachtelter Rechtecke in einem einheitlichen Begrenzungsgebiet kodieren Treemaps numerische Werte über die Fläche der Rechtecke, wodurch Benutzer relative Anteile innerhalb komplexer verschachtelter Strukturen bewerten können—beispielsweise bei der Nutzung von Festplattenspeicher, Umsätzen im Produktkatalog oder Budgetzuweisungen über Eltern- und Kindabteilungen.
Die Funktionsweise von Treemap-Diagrammen
In Apache ECharts verwenden Treemaps type: 'treemap'. Die Serie erwartet ein baumartig strukturiertes data Array, bei dem jedes Objekt ein name, ein quantitatives value, sowie ein optionales children Array für tiefere verschachtelte Ebenen.
1. Grundlegende Einrichtung
Um ein grundlegendes Treemap zu erstellen, definieren Sie ein hierarchisches Datenarray mit verschachtelten children und legen Sie type: 'treemap' innerhalb Ihrer Serienkonfiguration fest:
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Elektronik',
value: 400,
children: [
{ name: 'Handys', value: 240 },
{ name: 'Laptops', value: 160 }
]
},
{
name: 'Bekleidung',
value: 300,
children: [
{ name: 'Hemden', value: 180 },
{ name: 'Schuhe', value: 120 }
]
}
]
}
]
};
Fortgeschrittene strukturelle Techniken
Treemaps können mit mehrstufigen Stilregeln, Farbverläufen und interaktiven Drill-down-Steuerelementen für tiefgehende Datengraphen konfiguriert werden.
1. Mehrstufige Breadcrumb-Abstieg
Aktivieren Sie Legenden am oberen Rand und die Breadcrumb-Navigation, damit Benutzer oberste Kategorien identifizieren und reibungslos in verschachtelte Unterverzeichnisse navigieren können:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['Systemlaufwerk (C:)', 'Datenträger (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Zeigt jeweils nur eine Ebene an, durch Klicken auf die Abstiegsmöglichkeit
breadcrumb: {
show: true,
left: 'center',
bottom: '2%'
},
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 2,
gapWidth: 2
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderWidth: 1,
gapWidth: 1,
borderColorSaturation: 0.7
}
}
],
data: [
{
name: 'Systemlaufwerk (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Programmdateien', value: 230 },
{ name: 'Benutzer', value: 150 }
]
},
{
name: 'Datenträger (D:)',
value: 800,
children: [
{ name: 'Medien', value: 450 },
{ name: 'Sicherungen', value: 250 },
{ name: 'Projekte', value: 100 }
]
}
]
}
]
};
Feinabstimmung von Layout und Stil
Durch Anwendung von Abstandsbreiten, sauberen Rändern und deutlich unterschiedlichen Farben für Ebenen bleiben verschachtelte Rechtecke übersichtlich und visuell gut lesbar.
1. Benutzerdefinierte Zellenränder und Beschriftungsausrichtung
Anpassen von gapWidth und labelKonfigurationen, um deutliche Grenzen zwischen übergeordneten Containern und untergeordneten Segmenten zu gewährleisten:
option = {
series: [
{
type: 'treemap',
roam: false, // Deaktiviert manuelles Zoomen/Panen
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'Nordamerika',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Europa',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Asien-Pazifik',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'Lateinamerika',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Strategische Best Practices
- Verwenden Sie
gapWidthfür die Sichtbarkeit von Verschachtelungen:Durch Hinzufügen eines kleinengapWidth(z. B. 2px bis 4px) zwischen verschachtelten Rechtecken entsteht ein deutlicher Abstand zwischen übergeordneten Kategorien und untergeordneten Unterelementen. - Aktivieren Sie Breadcrumbs für tiefe Hierarchien: Wenn 3 oder mehr verschachtelte Ebenen angezeigt werden, aktivieren Sie `breadcrumb: { show: true }`, damit Benutzer ihre Position leicht verfolgen und zurück navigieren können.
- Halten Sie Beschriftungen kurz:Text kann leicht über kleine Blattrechtecke hinauslaufen. Kombinieren Sie kurze Namen mit Tooltips oder verwenden Sie
leafDepthum winzige Unterecken zu verbergen, bis vergrößert wird.