Wenn relative Anteile oder Prozentanteile eines einzelnen statischen Gesamtbetrags präsentiert werden, ist das Kreisdiagramm eine vertraute und intuitive Wahl. Durch die Aufteilung eines Kreises in proportionale Sektoren ermöglichen Kreisdiagramme es den Betrachtern, schnell zu verstehenwie einzelne Komponenten zu einem einheitlichen Ganzen beitragen, beispielsweise bei der Marktanteilsverteilung, der Aufteilung von Gerätepräferenzen oder der Zuordnung von Kostenkategorien.
Die Funktionsweise von Kreisdiagrammen
Im Gegensatz zu kartesischen Diagrammen, die horizontale und vertikale Achsen verwenden, ordnet ein Kreisdiagramm kategorische Daten direkt radialen Winkeln in einem Polarkoordinatensystem zu. In Apache ECharts wird ein Kreisdiagramm erstellt, indem man die Serie type auf 'pie' und liefert ein Array von Objekten, wobei jedes Element einen numerischen value und beschreibenden name.
1. Grundlegende Einrichtung
Um ein einfaches Kreisdiagramm zu erstellen, definieren Sie eine einzelne Serie mit type: 'pie' und übergeben Sie Ihr strukturiertes Datenset innerhalb des data Arrays:
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Zugriffsquelle',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: 'Suchmaschine' },
{ value: 735, name: 'Direkt' },
{ value: 580, name: 'E-Mail' },
{ value: 484, name: 'Vereinigte Anzeigen' },
{ value: 300, name: 'Videoanzeigen' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Erweiterte strukturelle Techniken
Kreisdiagramme können in ringförmige Donut-Layouts umgestellt oder mit benutzerdefinierten Radien gestaltet werden, um die wichtigsten Datensegmente hervorzuheben.
1. Donut-Diagramm-Variante
Die Einstellung des Radius Eigenschaft als Array mit zwei Werten (z. B. ['40%', '70%']) hohlt die Mitte aus, um einen sauberen Donut-Chart zu erstellen. Dies lässt Platz in der Mitte für benutzerdefinierte Zusammenfassungsbeschriftungen:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Gerätetyp',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'Desktop' },
{ value: 735, name: 'Mobil' },
{ value: 580, name: 'Tablet' },
{ value: 484, name: 'Sonstige' }
]
}
]
};
Feinabstimmung von Layout und Stil
Die Steuerung der Beschriftungsausläufe und der Segmentränder hält Tortendiagramme auch bei kleineren Datenwerten lesbar.
1. Benutzerdefinierte Segmentabstände und Beschriftungsausläufe
Durch Anwendung von Segmentrandbreiten und Konfiguration externer Hilfslinien wird Textüberlappung auf benachbarten Segmenten verhindert:
option = {
series: [
{
name: 'Marktanteil',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: 'Marke A' },
{ value: 30, name: 'Marke B' },
{ value: 15, name: 'Marke C' },
{ value: 10, name: 'Marke D' },
{ value: 5, name: 'Sonstige' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Strategische Best Practices
- Beschränken Sie die Segmente auf 5 oder 6: Zu viele kleine Segmente machen ein Tortendiagramm schwer lesbar. Gruppieren Sie geringfügige Werte unter einer Kategorie „Sonstige“, um die Aufmerksamkeit fokussiert zu halten.
- Sortieren Sie die Segmente nach Größe: Platzieren Sie das größte Segment beginnend um 12 Uhr und ordnen Sie die verbleibenden Segmente sequenziell im Uhrzeigersinn an, um eine einfache Ablesung zu ermöglichen.
- Zeigen Sie Prozentsätze direkt in Tooltips oder Beschriftungen an: Fügen Sie stets
{d}%in Beschriftungs- oder Tooltip-Formatierungen ein, damit Betrachter die Anteilsverhältnisse sofort erkennen, ohne mentale Rechnungen durchführen zu müssen.