Diagramme circulaire : répartition proportionnelle et découpage des segments

Lorsque l’on présente des proportions relatives ou des parts en pourcentage d’un seul total statique, le Diagramme circulaire est un choix familier et intuitif. En divisant un cercle en tranches proportionnelles, les diagrammes circulaires permettent aux spectateurs de comprendre rapidement la contribution de chaque composant à un tout unifié, telles que la répartition de parts de marché, les répartitions de préférences d’appareils ou les affectations par catégories de dépenses.

Le fonctionnement des diagrammes circulaires

Contrairement aux graphiques cartésiens qui utilisent des axes horizontaux et verticaux, les diagrammes circulaires transforment directement les données catégorielles en angles radiaux dans un système de coordonnées polaires. Dans Apache ECharts, un diagramme circulaire est créé en définissant la série type à 'pie' et en fournissant un tableau d’objets où chaque entrée contient un nombre valeur et une description nom.

1. Configuration essentielle

Pour créer un diagramme circulaire basique, définissez une seule série avec type: 'pie' et passez votre jeu de données structuré dans le tableau data array :

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: 'Source d’accès',
            type: 'pie',
            radius: '60%',
            data: [
                { value: 1048, name: 'Moteur de recherche' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Publicités Union' },
                { value: 300, name: 'Publicités vidéo' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

Techniques structurelles avancées

Les diagrammes circulaires peuvent être ajustés pour adopter des dispositions en forme de donut ou être stylisés avec des rayons personnalisés afin de mettre en évidence les segments principaux des données.

1. Variante de diagramme en anneau

En définissant le rayon propriété sous forme de tableau à deux valeurs (par exemple, ['40%', '70%']) creuse le centre pour créer un diagramme en donut propre. Cela laisse de la place au milieu pour des étiquettes de résumé personnalisées :

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Type de périphérique',
            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: 'Bureau' },
                { value: 735, name: 'Mobile' },
                { value: 580, name: 'Tablette' },
                { value: 484, name: 'Autre' }
            ]
        }
    ]
};

Affinage du layout et du style

Contrôler les lignes d’appel des étiquettes et les bords des tranches maintient la lisibilité des diagrammes en secteurs même avec de petites valeurs de données.

1. Séparation personnalisée des tranches et appels d’étiquettes

Appliquer des largeurs de bordure aux éléments et configurer des lignes directrices externes empêche le chevauchement du texte sur les tranches adjacentes :

option = {
    series: [
        {
            name: 'Part de marché',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
                { value: 40, name: 'Marque A' },
                { value: 30, name: 'Marque B' },
                { value: 15, name: 'Marque C' },
                { value: 10, name: 'Marque D' },
                { value: 5, name: 'Autres' }
            ],
            label: {
                formatter: '{b}: {d}%'
            },
            labelLine: {
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                borderColor: '#ffffff',
                borderWidth: 2
            }
        }
    ]
};

Meilleures pratiques stratégiques

• Limitez les tranches à 5 ou 6 :Trop de petites tranches rendent un diagramme en secteurs difficile à lire. Regroupez les petites valeurs sous une catégorie « Autres » pour garder le focus précis.
• Triez les tranches par taille :Placez la plus grande tranche en commençant à 12 heures et ordonnez les tranches restantes dans le sens horaire pour faciliter le balayage visuel.
• Affichez les pourcentages directement dans les infobulles ou les étiquettes : Incluez toujours {d}% dans les formateurs d’étiquettes ou d’infobulles afin que les spectateurs voient immédiatement les rapports de proportion sans faire de calcul mental.