Diagramme en donut : proportions basées sur l’anneau et métriques centrales

Lors de la présentation des répartitions relatives des catégories, le Diagramme en donutoffre une alternative moderne et à fort contraste aux diagrammes circulaires traditionnels en plein. En supprimant le noyau central, un diagramme en donut déplace l’accent visuel de la taille de la surface remplie vers les longueurs des arcs le long de l’anneau extérieur. Ce centre creux crée un espace visuel privilégié pour les indicateurs clés de performance, les totaux sommaires ou les indicateurs d’état, ce qui en fait un élément incontournable des tableaux de bord exécutifs et des synthèses financières.

Le fonctionnement des diagrammes en donut

Dans Apache ECharts, les diagrammes en donut sont configurés à l’aide du type de série 'pie' associé à un tableau à deux éléments radius : ['innerRadius', 'outerRadius']. La première valeur définit l’ouverture centrale creuse, tandis que la deuxième valeur contrôle la limite extérieure.

1. Configuration essentielle

Pour créer un diagramme en donut standard, déclarez une série avec type: 'pie', définissez radius: ['50%', '70%'], et transmettez vos objets de données avec name et value propriétés :

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Répartition du budget',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Ingénierie' },
                { value: 735, name: 'Marketing' },
                { value: 580, name: 'Opérations' },
                { value: 484, name: 'Ventes' },
                { value: 300, name: 'Support' }
            ]
        }
    ]
};

Techniques structurelles avancées

Les diagrammes en donut brillent lorsqu’ils sont associés à des statistiques centrales ou à un style visuel arrondi pour créer des composants d’interface utilisateur soignés.

1. Superposition de statistiques avec étiquette centrale

Utilisez des éléments graphiques ou des composants de titre centrés pour afficher un total général ou un KPI principal directement à l’intérieur de l’anneau du donut :

option = {
    title: {
        text: '$3 147',
        sous-titre: 'Dépenses totales',
        left: 'center',
        top: '42%',
        textStyle: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333'
        },
        sousTitreStyle: {
            fontSize: 14,
            color: '#666'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Dépenses',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            éviterSuperpositionEtiquettes: false,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Matériel' },
                { value: 735, name: 'Abonnements SaaS' },
                { value: 580, name: 'Fournitures de bureau' },
                { value: 484, name: 'Voyages' }
            ]
        }
    ]
};

Affinage du layout et du style des segments

Ajouter des rayons de coin subtils et des marges de segment distinctes donne aux graphiques en anneau un aspect élégant et moderne.

1. Extrémités arrondies et espacement entre les segments

Utilisez itemStyle.borderRadiusavec des bordures blanches claires pour donner à chaque segment d’arc une apparence douce et semblable à une pilule :

option = {
    series: [
        {
            name: 'Utilisation du stockage',
            type: 'pie',
            radius: ['45%', '70%'],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#ffffff',
                borderWidth: 4
            },
            label: {
                show: true,
                formatter: '{b}: {d}%'
            },
            data: [
                { value: 40, name: 'Documents' },
                { value: 25, name: 'Fichiers multimédias' },
                { value: 20, name: 'Données système' },
                { value: 15, name: 'Espace libre' }
            ]
        }
    ]
};

Meilleures pratiques stratégiques

• Optimisez le rapport entre le rayon intérieur et le rayon extérieur :Maintenez un rayon intérieur compris entre 50 % et 70 % du rayon extérieur afin de garder les segments suffisamment épais pour un survol facile tout en préservant un espace important au centre.
• Utilisez l’espace central de manière intentionnelle :Utilisez la zone creuse centrale pour afficher le total général ou la métrique du segment sélectionné au lieu de surcharger le périmètre du graphique avec des boîtes de texte supplémentaires.
• Limitez le nombre de tranches :Limitez l’anneau à 5 ou 6 segments principaux. Si vous avez de nombreuses petites catégories, regroupez-les dans une catégorie « Autres » afin d’éviter des arcs trop fins et illisibles.