Diagramme en barres : disposition horizontale et optimisation des étiquettes

Horizontal Diagrammes en barres sont idéaux pour afficher des données de classement, des noms de catégories longs ou des métriques de progression. En étirant les barres le long de l’axe X, cette structure visuelle offre aux étiquettes des catégories une ample place horizontale, éliminant ainsi la nécessité de pencher ou de tronquer le texte. Que vous construisiez des tableaux de classement des dix premiers, des analyses des réponses aux sondages ou des comparaisons de performance horizontales, les diagrammes en barres offrent une lisibilité claire sur les écrans de bureau comme sur les écrans mobiles.

Le fonctionnement des barres horizontales

Dans Apache ECharts, les diagrammes en colonnes et les diagrammes en barres utilisent exactement le même 'bar' type de série. La transition vers une disposition horizontale s’effectue en attribuant directement les données de catégorie à l’axe vertical (yAxis) et en définissant l’axe horizontal (xAxis) comme axe de valeurs numériques. Le moteur de graphique change la direction d’affichage, dessinant les barres horizontalement de gauche à droite.

1. Configuration essentielle

Pour créer un diagramme en barres horizontal de base, définissez type: 'category' sur le yAxis et fournissez votre tableau de données, tout en définissant type: 'value' sur le xAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Brésil', 'Indonésie', 'États-Unis', 'Inde', 'Chine']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

Techniques structurelles avancées

Les diagrammes en barres horizontales prennent en charge plusieurs groupes de données, un surbrillance ciblée et des traitements personnalisés des coins pour les conceptions modernes de tableaux de bord.

1. Comparaison horizontale multi-séries

Placez plusieurs objets dans le série tableau pour créer des barres horizontales groupées par étiquette de catégorie :

option = {
    légende: {
        données: ['Objectif 2025', 'Réalisation 2025']
    },
    axeX: {
        type: 'valeur'
    },
    axeY: {
        type: 'catégorie',
        données: ['Projet A', 'Projet B', 'Projet C', 'Projet D']
    },
    série: [
        {
            nom: 'Objectif 2025',
            type: 'barre',
            données: [80, 95, 70, 85]
        },
        {
            nom: 'Réalisation 2025',
            type: 'barre',
            données: [85, 90, 75, 92]
        }
    ]
};

2. Extrémités arrondies et style de mise en évidence

Appliquer des coins arrondis à droite en utilisant borderRadius sur les barres horizontales (en spécifiant [haut-droit, bas-droit, bas-gauche, haut-gauche]):

option = {
    axeX: {
        type: 'valeur'
    },
    axeY: {
        type: 'catégorie',
        données: ['Recherche directe', 'Campagnes par e-mail', 'Réseaux sociaux', 'Recherche payée']
    },
    série: [
        {
            type: 'barre',
            données: [
                120,
                200,
                {
                    valeur: 450,
                    styleÉlément: {
                        couleur: '#fac858'
                    }
                },
                280
            ],
            styleÉlément: {
                couleur: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Arrondir uniquement les extrémités droites
            }
        }
    ]
};

Affinage du layout et de l’espacement

Étant donné que les étiquettes de catégorie horizontales varient en longueur de texte, ajuster les marges gauche et l’alignement des étiquettes évite le découpage des étiquettes.

1. Marges de la grille du conteneur

Utilisez le bloc de configuration grid pour allouer suffisamment d’espace aux étiquettes longues de l’axe Y :

option = {
    grille: {
        gauche: '15%',  // Augmenter la marge gauche pour les textes de catégorie longs
        droite: '8%',
        bas: '10%',
        contientÉtiquette: true
    },
    axeX: {
        type: 'valeur'
    },
    axeY: {
        type: 'catégorie',
        données: [
            'Modernisation de l’infrastructure d’entreprise',
            'Migration vers le cloud phase 2',
            'Optimisation de la base de données',
            'Redesign de la passerelle API'
        ]
    },
    série: [
        {
            type: 'barre',
            données: [75, 60, 90, 40],
            largeurBarre: '50%'
        }
    ]
};

Meilleures pratiques stratégiques

• Trier les données intentionnellement : Disposez les barres horizontales dans l’ordre croissant ou décroissant chaque fois que possible. Les listes classées rendent immédiatement évidents les meilleurs performeurs pour les lecteurs.
• Utilisez containLabel: true: Toujours inclure containLabel: true à l’intérieur du grille configuration pour éviter que les titres de catégorie longs débordent du bord de la zone de dessin.
• Étiquettes de valeurs directes : Pour des classements propres, envisagez d’afficher les valeurs de données directement à la fin de chaque barre en utilisant label: { show: true, position: 'right' } et en masquant entièrement l’axe numérique inférieur.