Wenn mehrstufige Hierarchien dargestellt werden, bei denen innere Ringe hochrangige Kategorien darstellen und äußere Ringe Unterkategorien aufgliedern, bietet das Sunburst-Diagramm ein sauberes, radiales Alternativverfahren zu Treemaps. Durch die Anordnung verschachtelter Kategorien in konzentrischen Ringen ermöglichen Sunburst-Diagramme es Benutzern, mehrstufige strukturelle Anteile, Eltern-Kind-Beziehungen und Verteilungspfade auf kompakter Fläche darzustellen – beispielsweise globale Produktkategorien, Organigramme oder mehrstufige Benutzerabwanderungspfade.
Die Funktionsweise von Sunburst-Diagrammen
In Apache ECharts verwenden Sunburst-Diagramme type: 'sunburst'. Ähnlich wie bei Treemaps erwartet die Serie eine verschachtelte Baumstruktur im dataArray, in dem Elternobjekte childrenArrays enthalten. Die Engine rendert die Stammknoten oder obersten Kategorien im innersten Kreis und erweitert Unterkategorien nach außen über konzentrische Ringebenen.
1. Grundlegende Einrichtung
Um ein grundlegendes Sunburst-Diagramm zu erstellen, geben Sie einen verschachtelten Baumdatensatz an und legen Sie type: 'sunburst' innerhalb Ihres Series-Objekts fest:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Großelternteil',
children: [
{
name: 'Elternteil 1',
value: 15,
children: [
{ name: 'Kind 1', value: 5 },
{ name: 'Kind 2', value: 10 }
]
},
{
name: 'Elternteil 2',
value: 10,
children: [
{ name: 'Kind 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Fortgeschrittene strukturelle Techniken
Sunburst-Diagramme können mit ringbasierten Stilregeln, Farbvererbung und interaktiven Drill-downs per Klick zum Vergrößern angepasst werden.
1. Ringanpassung auf Ebene und Drill-Down
Verwenden Sie das levelsArray, um für jede konzentrische Ringebene von innen nach außen unterschiedliche Radien, Label-Verhalten und Elementstile zu definieren:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['Elektronik', 'Haus & Leben']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // Aktiviert die Detailansicht beim Klicken auf einen Knoten
levels: [
{},
{
// Innere Ring (Kategorien auf oberster Ebene)
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Mittlerer Ring (Unterkategorien)
r0: '40%',
r: '65%',
label: { rotate: 'tangential', fontSize: 11 }
},
{
// Äußerer Ring (Blattprodukte)
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: 'Elektronik',
children: [
{
name: 'Audio',
children: [
{ name: 'Kopfhörer', value: 40 },
{ name: 'Lautsprecher', value: 25 }
]
},
{
name: 'Computer',
children: [
{ name: 'Laptops', value: 80 },
{ name: 'Desktops', value: 35 }
]
}
]
},
{
name: 'Haus & Leben',
children: [
{
name: 'Möbel',
children: [
{ name: 'Stühle', value: 50 },
{ name: 'Tische', value: 30 }
]
},
{
name: 'Dekoration',
children: [
{ name: 'Beleuchtung', value: 45 },
{ name: 'Teppiche', value: 20 }
]
}
]
}
]
}
]
};
Feinabstimmung von Layout und Beschriftungsausrichtung
Steuern der Beschriftungsrotation (radial vs tangential) hält den Text lesbar, wenn die Sektoren sich den äußeren Ringen nähern.
1. Benutzerdefinierte Sektorentrennungen und radiale Beschriftungen
Elementränder anwenden und setzenrotate: 'radial'um den Text sauber entlang der Sektorenradien auszurichten:
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
name: 'Software',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'On-Prem', value: 60 }
]
},
{
name: 'Hardware',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'Server', value: 90 },
{ name: 'Netzwerk', value: 110 }
]
},
{
name: 'Dienstleistungen',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Beratung', value: 70 },
{ name: 'Support', value: 50 }
]
}
]
}
]
};
Strategische Best Practices
- Beschriftungsrotation an die Ringtiefe anpassen: Horizontale Beschriftungen (
rotate: 0) oder tangential ausgerichtete Beschriftungen für breite innere Ringe, und wechseln Sie zuradialBeschriftungen für schmale äußere Sektoren. - Aktivieren
nodeClick: 'rootToNode':Interaktives Zoomen ermöglicht es Benutzern, auf jeden übergeordneten Bogen zu klicken, um direkt auf dessen Unterbäume zu fokussieren, ohne visuelle Verwirrung. - Farbvererbung nutzen:Erlauben Sie, dass Kindsektoren Grundtöne von ihrem übergeordneten Knoten erben, wobei Helligkeit/Sättigung variieren, um eine klare visuelle Gruppierung über alle Ebenen hinweg zu gewährleisten.