Balkendiagramm: Horizontale Anordnung und Optimierung von Beschriftungen

HorizontalBalkendiagramme eignen sich ideal zur Darstellung von Ranglisten, langen Kategorienamen oder Fortschrittsmetriken. Durch Verlängerung der Balken entlang der X-Achse bietet diese visuelle Struktur den Kategorienamen ausreichend horizontalen Platz und beseitigt die Notwendigkeit, Text zu neigen oder abzuschneiden. Ob Sie Top-10-Ranglisten, Umfrageergebnisse oder horizontale Leistungsvergleiche erstellen – Balkendiagramme bieten eine klare Lesbarkeit sowohl auf Desktop- als auch auf Mobilgeräten.

Die Funktionsweise horizontaler Balken

In Apache ECharts verwenden Säulen- und Balkendiagramme genau den gleichen 'bar'Reihentyp. Der Wechsel zu einer horizontalen Anordnung erfolgt durch Zuweisung der Kategoriedaten direkt der vertikalen Achse (yAxis) und Definition der horizontalen Achse (xAxis) als numerische Wertachse. Die Diagramm-Engine dreht die Darstellungsrichtung und zeichnet die Balken horizontal von links nach rechts.

1. Grundlegende Einrichtung

Um ein einfaches horizontales Balkendiagramm zu erstellen, legen Sie type: 'category' auf der yAxis und geben Sie Ihr Datenarray an, während Sie type: 'value' auf der xAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Brasilien', 'Indonesien', 'USA', 'Indien', 'China']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

Fortgeschrittene strukturelle Techniken

Horizontale Balkendiagramme unterstützen mehrere Datengruppen, gezielte Hervorhebungen und benutzerdefinierte Ecken für moderne Dashboard-Designs.

1. Horizontale Mehrreihen-Vergleich

Platzieren Sie mehrere Objekte in der ReiheArray zum Erstellen gruppiert horizontaler Balken pro Kategorielabel:

option = {
    legende: {
        daten: ['2025 Ziel', '2025 Tatsächlich']
    },
    xAchse: {
        typ: 'Wert'
    },
    yAchse: {
        typ: 'Kategorie',
        daten: ['Projekt A', 'Projekt B', 'Projekt C', 'Projekt D']
    },
    reihen: [
        {
            name: '2025 Ziel',
            typ: 'Balken',
            daten: [80, 95, 70, 85]
        },
        {
            name: '2025 Tatsächlich',
            typ: 'Balken',
            daten: [85, 90, 75, 92]
        }
    ]
};

2. Abgerundete Endkappen und Hervorhebungsstil

Abgerundete rechte Ecken mit Hilfe vonborderRadiusauf horizontalen Balken (Angabe von[oben-rechts, unten-rechts, unten-links, oben-links]):

option = {
    xAchse: {
        typ: 'Wert'
    },
    yAchse: {
        typ: 'Kategorie',
        daten: ['Direkte Suche', 'E-Mail-Kampagnen', 'Soziale Medien', 'Bezahlte Suche']
    },
    reihen: [
        {
            typ: 'Balken',
            daten: [
                120,
                200,
                {
                    wert: 450,
                    itemStyle: {
                        farbe: '#fac858'
                    }
                },
                280
            ],
            itemStyle: {
                farbe: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Nur die rechten Endkappen abrunden
            }
        }
    ]
};

Feinabstimmung von Layout und Abstand

Da horizontale Kategorielabel unterschiedliche Textlängen aufweisen, verhindert die Anpassung der linken Ränder und der Beschriftungsausrichtung das Abschneiden der Beschriftungen.

1. Ränder des Container-Grids

Verwenden Sie dengridKonfigurationsblock, um ausreichend Platz für lange Y-Achsen-Beschriftungen bereitzustellen:

option = {
    grid: {
        links: '15%',  // Linken Rand für lange Kategorietexte erhöhen
        rechts: '8%',
        unten: '10%',
        enthalteBeschriftung: true
    },
    xAchse: {
        typ: 'Wert'
    },
    yAchse: {
        typ: 'Kategorie',
        daten: [
            'Modernisierung der Unternehmensinfrastruktur',
            'Cloud-Migration Phase 2',
            'Datenbank-Optimierung',
            'Neugestaltung des API-Gateways'
        ]
    },
    reihen: [
        {
            typ: 'Balken',
            daten: [75, 60, 90, 40],
            balkenBreite: '50%'
        }
    ]
};

Strategische Best Practices

• Daten gezielt sortieren:Ordnen Sie die horizontalen Balken bei Gelegenheit in aufsteigender oder absteigender Reihenfolge an. Ranglisten machen die Spitzenleistungen für Leser sofort erkennbar.
• Verwenden SiecontainLabel: true: Immer einbeziehen containLabel: true innerhalb der Raster Konfiguration, um zu verhindern, dass lange Kategorietitel über den Rand der Zeichenfläche hinauslaufen.
• Direkte Wertbeschriftungen: Für saubere Ranglisten empfiehlt es sich, die Datenwerte direkt am Ende jeder Säule mithilfe von label: { show: true, position: 'rechts' } und die numerische untere Achse vollständig auszublenden.