Graphique en barres groupées : comparaison horizontale multi-séries

Comparer des métriques secondaires sur des noms de catégories longs est mieux géré avec un Graphique en barres groupées. En plaçant les barres horizontales associées côte à côte le long de l’axe Y, ce layout permet aux utilisateurs d’analyser les métriques de performance à travers plusieurs catégories sans sacrifier la lisibilité des étiquettes. Il constitue un choix efficace pour les décompositions budgétaires sur plusieurs années, les comparaisons de fonctionnalités de produits ou les repères de ventes multirégionaux, où les étiquettes de catégorie nécessitent un espace horizontal important.

Le fonctionnement des barres horizontales groupées

Comme les groupes de colonnes verticales, les groupes de barres horizontales sont créés en attribuant des étiquettes catégorielles identiques à l’axe Y tout en définissant plusieurs séries avec type: 'barre'. Le moteur de rendu gère automatiquement le regroupement visuel, décalant chaque série dans le bloc de catégorie le long du plan vertical.

1. Configuration essentielle

Pour créer un graphique en barres groupées, attribuez vos catégories discrètes à yAxis.data, précisez un axe numérique xAxis, et incluez plusieurs séries de barres :

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'ombre' }
    },
    légende: {
        data: ['2025 attribué', '2026 attribué']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Recherche et développement', 'Marketing et ventes', 'Support client', 'Opérations']
    },
    series: [
        {
            name: '2025 attribué',
            type: 'bar',
            data: [320, 450, 210, 380]
        },
        {
            name: '2026 attribué',
            type: 'bar',
            data: [380, 490, 240, 410]
        }
    ]
};

Techniques structurelles avancées

Étendre votre graphique à trois séries ou plus offre des informations plus riches, à condition que la densité visuelle reste facile à lire.

1. Style multi-métrique avec des dégradés de couleurs personnalisés

Appliquez des palettes de couleurs uniques ou des remplissages subtils en dégradé sur les séries horizontales pour maintenir les groupes distincts lisibles :

option = {
    légende: {
        data: ['Ventes Q1', 'Ventes Q2', 'Ventes Q3']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Région Nord', 'Région Sud', 'Région Est', 'Région Ouest']
    },
    series: [
        {
            name: 'Ventes Q1',
            type: 'bar',
            data: [120, 200, 150, 80],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Ventes Q2',
            type: 'bar',
            data: [140, 220, 170, 95],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Ventes Q3',
            type: 'bar',
            data: [180, 250, 190, 110],
            itemStyle: {
                color: '#fac858',
                borderRadius: [0, 4, 4, 0]
            }
        }
    ]
};

Affinage du layout et de l’espacement

Gérer les espaces entre les barres le long de l’axe vertical Y est essentiel pour maintenir une séparation claire entre les blocs de catégories.

1. Espaces internes verticaux et marges des catégories

Ajustez les attributs d’espacement pour maintenir les barres de série bien regroupées sans qu’elles se fondent dans les groupes de catégories voisines :

option = {
    grid: {
        left: '20%',
        right: '10%',
        containLabel: true
    },
    legend: {
        data: ['Baseline', 'Optimisé']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Temps de réponse de l'API', 'Durée de requête de la base de données', 'Temps de chargement des actifs']
    },
    series: [
        {
            name: 'Baseline',
            type: 'bar',
            barGap: '15%',            // Espace entre les barres au sein de la même catégorie
            barCategoryGap: '40%',    // Espace entre les blocs de catégories
            data: [350, 180, 520]
        },
        {
            name: 'Optimized',
            type: 'bar',
            data: [120, 65, 210]
        }
    ]
};

Meilleures pratiques stratégiques

• Gardez les groupes centrés : Restez sur un maximum de 3 ou 4 séries par catégorie. Au-delà de cela, les graphiques empilés ou à plusieurs panneaux sont plus adaptés pour éviter le brouillage visuel vertical.
• Allouez une marge Y adéquate : Les graphiques horizontaux regroupés occupent une hauteur verticale importante. Augmentez la hauteur du conteneur ou ajustez grid.left pour éviter la troncature du texte.
• Ordre des métriques cohérent : Assurez-vous que l’ordre des séries dans votre code correspond au déroulement naturel de votre récit (par exemple, l’année historique en premier, l’année actuelle en second).