Säulendiagramm: Grundlegende Einrichtung, Gestaltung und Layout

Im Bereich der Datenvisualisierung und Berichterstattung ist das Säulendiagramm (ein Säulendiagramm) ist das primäre Werkzeug zum Vergleichen diskreter Kategorien über eine oder mehrere Metriken. Im Gegensatz zu horizontalen Balkendiagrammen, die sich gut für lange Textbeschriftungen eignen, nutzen vertikale Säulendiagramme Höhenunterschiede, um sofort Volumen, Wachstum und Varianz. Ob Sie Quartalsverkaufszahlen, Spitzen der Server-CPU-Auslastung oder Webverkehr nach Kanal anzeigen, Säulendiagramme bieten einen klaren visuellen Standard für kategorienbasierte Metriken.

Die Funktionsweise vertikaler Säulen

In Apache ECharts basieren sowohl horizontale Balkendiagramme als auch vertikale Säulendiagramme auf dem 'bar'Reihentyp. Der entscheidende Faktor, der ein Säulendiagramm erzeugt, ist die Platzierung der Kategorielabel auf der horizontalen Achse (xAxis), während die vertikale Achse (yAxis) auf numerische Werte festgelegt wird. Die Diagramm-Engine liest das Datenarray und skaliert die Höhe jeder vertikalen Säule dynamisch im Verhältnis zur numerischen Skala.

1. Grundlegende Einrichtung

Um ein grundlegendes Säulendiagramm zu erstellen, definieren Sie eine kategorienbasierte X-Achse und ordnen Sie Ihre Datensätze einem Reihenobjekt mit type: 'bar':

option = {
    xAxis: {
        type: 'category',
        data: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

Fortgeschrittene strukturelle Techniken

Beim Erstellen von Dashboards sind einfache Einzeldiagramme oft nicht ausreichend. ECharts bietet saubere Syntax-Optionen zur Verwaltung von Mehrreihen-Vergleichen, benutzerdefinierten Dimensionen und Layout-Abständen.

Vergleich mehrerer Reihen

Um mehrere Datensätze nebeneinander zu vergleichen (z. B. Umsatz im Jahresvergleich), fügen Sie mehrere Objekte innerhalb des seriesArray hinzu. Der Layout-Engine werden die zugehörigen Säulen pro Kategorie entlang der X-Achse gruppiert:

option = {
    xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Umsatz 2025',
            type: 'bar',
            data: [320, 332, 301, 334]
        },
        {
            name: 'Umsatz 2026',
            type: 'bar',
            data: [220, 182, 191, 234]
        }
    ]
};

Benutzerdefinierte Spaltenstile und individuelle Hervorhebungen

Sie können globale Stile auf eine gesamte Serie anwenden oder direkt auf bestimmte Datenpunkte zielen. Dies ist besonders nützlich, um wichtige Ereignisse, Ausreißer oder spezifische Ziele hervorzuheben.

• Farbe: Legt die Füllfarbe fest (Hex, RGB oder lineare Verläufe).
• Eckenradius: Fügt Spalten abgerundete Ecken hinzu (z. B. [5, 5, 0, 0] für obere Ecken).
• Transparenz: Passt die Transparenz der Säulen an.
• Schattenunschärfe & Schattenfarbe: Fügt Säulen Auftrieb und Schatten hinzu.

option = {
    xAxis: {
        type: 'category',
        data: ['Direkt', 'E-Mail', 'Anzeigen-Netzwerke', 'Videoanzeigen', 'Suche']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // Einzelne Spitzen-Säule hervorheben
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Feinabstimmung von Layout und Größe

Säulengröße und Abstände beeinflussen die Lesbarkeit erheblich, insbesondere bei der Darstellung von Diagrammen auf anspruchsvollen Bildschirmen oder dichten Dashboards.

1. Steuerung der Breite und Begrenzungen

Standardmäßig skaliert sich die Breite der Säulen dynamisch basierend auf dem Diagrammcontainer. Sie können diese Proportionen mithilfe von Größeneigenschaften steuern:

• Säulenbreite: Definiert die Säulenbreite in festen Pixeln oder als Prozentsatz der Kategorienbreite (z. B. '30%').
• maxSäulenbreite: Legt eine Obergrenze für die Breite fest, damit Säulen bei breiten Bildschirmen nicht übermäßig gestreckt werden.
• barMinHeight: Erzwingt eine minimale Pixelhöhe, damit nahezu Null-Werte weiterhin klickbar und sichtbar bleiben.

2. Spaltenabstand und Hintergrundverläufe

Um Ihren Spalten ein modernes Dashboard-Aussehen zu verleihen, passen Sie die inneren Abstände an oder aktivieren Sie Hintergrundverläufe mit voller Höhe:

option = {
    xAxis: {
        type: 'category',
        data: ['Mo', 'Di', 'Mi', 'Do', 'Fr']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            barWidth: '40%',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.15)',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Strategische Best Practices

• Halten Sie den Abstand ausgewogen: Vermeiden Sie die Einstellung von barWidth zu breit (über 60 %), um zu verhindern, dass das visuelle Layout überfüllt wirkt.
• Horizontale vs. vertikale Entscheidung: Verwenden Sie Säulendiagramme, wenn die Kategorielabel kurz sind (z. B. Monate, Quartale, Codes). Wenn Ihre Labels lange Beschreibungen oder Namen sind, überlegen Sie, die Kategoriedaten auf die yAxis um stattdessen ein horizontales Balkendiagramm zu erstellen.
• Integrität der Null-Basis: Stellen Sie immer sicher, dass die numerische Achse bei Null beginnt (0). Das Abschneiden der unteren Skala in Säulendiagrammen verfälscht die Höhenverhältnisse und täuscht die Betrachter.