Wykres ciasteczkowy: proporcje oparte na pierścieniu i metryki w centrum

Podczas prezentowania względnych alokacji kategorii, Wykres ciasteczkowy oferuje nowoczesną, wysokokontrastową alternatywę dla tradycyjnych pełnych wykresów kołowych. Usunięcie centralnej części przesuwa wizualne naciski z wielkości wypełnionych obszarów na długości łuków wzdłuż zewnętrznej krawędzi. To puste wnętrze tworzy idealne miejsce na kluczowe metryki wydajności, podsumowania lub wskaźniki stanu — co czyni go standardowym elementem paneli statusu dla kierownictwa i podsumowań finansowych.

Zasady działania wykresów ciasteczkowych

W Apache ECharts wykresy ciasteczkowe są konfigurowane przy użyciu typu serii 'pie' typu serii skojarzonego z dwuelementowym promieniemtablicą: ['innerRadius', 'outerRadius']. Pierwsza wartość określa otwór w środku, a druga wartość kontroluje granicę zewnętrzną.

1. Podstawowa konfiguracja

Aby stworzyć standardowy wykres ciasteczkowy, zadeklaruj serię z type: 'pie', ustaw radius: ['50%', '70%'], a przekaż obiekty danych z właściwościami name oraz valuewłaściwościami:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Przydział budżetu',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Inżynieria' },
                { value: 735, name: 'Marketing' },
                { value: 580, name: 'Działania' },
                { value: 484, name: 'Sprzedaż' },
                { value: 300, name: 'Wsparcie' }
            ]
        }
    ]
};

Zaawansowane techniki strukturalne

Wykresy ciasteczkowe wyróżniają się, gdy są łączone z centralnymi statystykami lub zaokrąglonym stylizowaniem wizualnym, tworząc wygładzone komponenty interfejsu użytkownika.

1. Nakładka statystyk etykiety w centrum

Wykorzystaj elementy graficzne lub komponenty tytułu w centrum, aby wyświetlić całkowitą sumę lub kluczowy wskaźnik wydajności bezpośrednio wewnątrz pierścienia ciasteczkowego:

option = {
    tytuł: {
        tekst: '$3,147',
        podtytuł: 'Łącznie wydane',
        lewo: 'środek',
        górna: '42%',
        stylTekstu: {
            rozmiarCzcionki: 28,
            pogrubienie: 'pogrubiony',
            kolor: '#333'
        },
        stylPodtytułu: {
            rozmiarCzcionki: 14,
            kolor: '#666'
        }
    },
    podpowiedź: {
        wyzwalacz: 'element'
    },
    serie: [
        {
            nazwa: 'Wydatki',
            typ: 'płaski',
            promień: ['60%', '80%'],
            środek: ['50%', '50%'],
            unikajNadpisywaniaEtykiet: false,
            etykieta: {
                pokazuj: false
            },
            dane: [
                { wartość: 1048, nazwa: 'Sprzęt' },
                { wartość: 735, nazwa: 'Subskrypcje SaaS' },
                { wartość: 580, nazwa: 'Wyposażenie biurowe' },
                { wartość: 484, nazwa: 'Podróże' }
            ]
        }
    ]
};

Dokładna dostosowanie układu i stylizacja segmentów

Dodanie delikatnych promieni narożników i wyraźnych marginesów segmentów nadaje wykresom pierścieniowym nowoczesny, elegancki wygląd.

1. Zaokrąglone końce i odstępy między segmentami

Użyj itemStyle.borderRadiusw połączeniu z jasnymi białymi obramowaniami, aby nadać każdemu odcinkowi łuku miękką, podobną do tabletki wygląd:

option = {
    serie: [
        {
            nazwa: 'Użycie pamięci',
            typ: 'płaski',
            promień: ['45%', '70%'],
            stylElementu: {
                borderRadius: 10,
                kolorObramowania: '#ffffff',
                szerokośćObramowania: 4
            },
            etykieta: {
                pokazuj: true,
                format: '{b}: {d}%'
            },
            dane: [
                { wartość: 40, nazwa: 'Dokumenty' },
                { wartość: 25, nazwa: 'Pliki multimedialne' },
                { wartość: 20, nazwa: 'Dane systemowe' },
                { wartość: 15, nazwa: 'Wolne miejsce' }
            ]
        }
    ]
};

Strategiczne najlepsze praktyki

• Optymalizuj stosunek promienia wewnętrznego do zewnętrznego:Utrzymuj promień wewnętrzny pomiędzy 50% a 70% promienia zewnętrznego, aby zapewnić wystarczającą grubość segmentów do łatwego przesuwania się nad nimi, jednocześnie zachowując wystarczająco dużo miejsca w środku.
• Zamiernie wykorzystaj przestrzeń w środku:Wykorzystaj centralną pustą przestrzeń do wyświetlania całkowitej sumy lub wybranej miary segmentu zamiast zatłoczania obwodu wykresu dodatkowymi polami tekstowymi.
• Ogranicz liczbę segmentów:Ogranicz pierścień do 5 lub 6 głównych segmentów. Jeśli masz wiele małych kategorii, połącz je w kategorię „Inne”, aby uniknąć cienkich, nieczytelnych łuków.