Doughnut-Chart: ringbasierte Anteile und zentrale Metriken

Beim Darstellen relativer Kategorienzuweisungen bietet der Doughnut-Charteine moderne, hochkontrastreiche Alternative zu traditionellen festen Kreisdiagrammen. Durch Entfernen des zentralen Kerns verlagert ein Doughnut-Chart die visuelle Betonung von der Größe des gefüllten Bereichs hin zu den Bogenlängen entlang des äußeren Rings. Dieser hohle Zentrum schafft erstklassigen visuellen Raum für zentrale Leistungsindikatoren, Zusammenfassungssummen oder Statusanzeigen – wodurch er zu einem Standardelement für Executive-Status-Dashboards und Finanzzusammenfassungen wird.

Die Mechanik von Doughnut-Charts

In Apache ECharts werden Doughnut-Charts konfiguriert mithilfe des 'pie'Reihentyp, kombiniert mit einem zweielementigen radiusArray: ['innerRadius', 'outerRadius']. Der erste Wert definiert die hohle Zentrumöffnung, während der zweite Wert die äußere Begrenzung steuert.

1. Grundlegende Einrichtung

Um einen Standard-Doughnut-Chart zu erstellen, deklarieren Sie eine Reihe mit type: 'pie', legen Sie fest radius: ['50%', '70%'], und übergeben Sie Ihre Datenobjekte mit name und valueEigenschaften:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Budget-Zuweisung',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Engineering' },
                { value: 735, name: 'Marketing' },
                { value: 580, name: 'Operations' },
                { value: 484, name: 'Sales' },
                { value: 300, name: 'Support' }
            ]
        }
    ]
};

Fortgeschrittene strukturelle Techniken

Doughnut-Charts überzeugen, wenn sie mit zentralen Statistiken oder abgerundeter visueller Gestaltung kombiniert werden, um professionelle UI-Elemente zu schaffen.

1. Statistische Überschichtung mit zentriertem Label

Verwenden Sie grafische Elemente oder zentrierte Titelkomponenten, um eine Gesamtsumme oder einen primären KPI direkt innerhalb des Doughnut-Rings anzuzeigen:

option = {
    title: {
        text: '$3.147',
        subtext: 'Gesamtausgaben',
        left: 'center',
        top: '42%',
        textStyle: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333'
        },
        subtextStyle: {
            fontSize: 14,
            color: '#666'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Ausgaben',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Hardware' },
                { value: 735, name: 'SaaS-Abonnements' },
                { value: 580, name: 'Bürobedarf' },
                { value: 484, name: 'Reisen' }
            ]
        }
    ]
};

Feinabstimmung von Layout und Segmentgestaltung

Durch subtile Eckenrundungen und deutliche Segmentabstände erhält man Donut-Charts ein schmales, modernes Aussehen.

1. Abgerundete Enden und Segmentabstände

Verwenden Sie itemStyle.borderRadius zusammen mit klaren weißen Rändern, um jedem Bogensegment eine weiche, pilzenähnliche Erscheinung zu verleihen:

option = {
    series: [
        {
            name: 'Speicherbelegung',
            type: 'pie',
            radius: ['45%', '70%'],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#ffffff',
                borderWidth: 4
            },
            label: {
                show: true,
                formatter: '{b}: {d}%'
            },
            data: [
                { value: 40, name: 'Dokumente' },
                { value: 25, name: 'Mediendateien' },
                { value: 20, name: 'Systemdaten' },
                { value: 15, name: 'Freier Speicherplatz' }
            ]
        }
    ]
};

Strategische Best Practices

• Optimieren Sie das Verhältnis von Innen- zu Außendurchmesser:Halten Sie den inneren Radius zwischen 50 % und 70 % des äußeren Radius, um die Segmente dick genug zu halten, damit sie leicht zu überfahren sind, und gleichzeitig ausreichend Platz im Zentrum zu erhalten.
• Nutzen Sie den zentralen Raum gezielt:Verwenden Sie den zentralen Hohlraum, um die Gesamtsumme oder einen ausgewählten Segmentwert anzuzeigen, anstatt den Umfang des Diagramms mit zusätzlichen Textfeldern zu überladen.
• Begrenzen Sie die Anzahl der Segmente:Begrenzen Sie den Ring auf 5 oder 6 Hauptsegmente. Wenn Sie zahlreiche kleine Kategorien haben, fassen Sie sie in eine Kategorie „Sonstige“ zusammen, um dünne, unlesbare Bögen zu vermeiden.