{"id":2077,"date":"2026-07-24T09:00:08","date_gmt":"2026-07-24T09:00:08","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/column-chart-core-setup-styling-and-layout-guide\/"},"modified":"2026-07-24T09:00:08","modified_gmt":"2026-07-24T09:00:08","slug":"column-chart-core-setup-styling-and-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/column-chart-core-setup-styling-and-layout-guide","title":{"rendered":"S\u00e4ulendiagramm: Grundlegende Einrichtung, Gestaltung und Layout"},"content":{"rendered":"

Im Bereich der Datenvisualisierung und Berichterstattung ist das S\u00e4ulendiagramm<\/strong> (ein S\u00e4ulendiagramm) ist das prim\u00e4re Werkzeug zum Vergleichen diskreter Kategorien \u00fcber eine oder mehrere Metriken. Im Gegensatz zu horizontalen Balkendiagrammen, die sich gut f\u00fcr lange Textbeschriftungen eignen, nutzen vertikale S\u00e4ulendiagramme H\u00f6henunterschiede, um sofort Volumen, Wachstum und Varianz<\/em>. Ob Sie Quartalsverkaufszahlen, Spitzen der Server-CPU-Auslastung oder Webverkehr nach Kanal anzeigen, S\u00e4ulendiagramme bieten einen klaren visuellen Standard f\u00fcr kategorienbasierte Metriken.<\/p>\n

Die Funktionsweise vertikaler S\u00e4ulen<\/h2>\n

In Apache ECharts basieren sowohl horizontale Balkendiagramme als auch vertikale S\u00e4ulendiagramme auf dem 'bar'<\/code>Reihentyp. Der entscheidende Faktor, der ein S\u00e4ulendiagramm erzeugt, ist die Platzierung der Kategorielabel auf der horizontalen Achse (xAxis<\/code>), w\u00e4hrend die vertikale Achse (yAxis<\/code>) auf numerische Werte festgelegt wird. Die Diagramm-Engine liest das Datenarray und skaliert die H\u00f6he jeder vertikalen S\u00e4ule dynamisch im Verh\u00e4ltnis zur numerischen Skala.<\/p>\n

1. Grundlegende Einrichtung<\/h3>\n

Um ein grundlegendes S\u00e4ulendiagramm zu erstellen, definieren Sie eine kategorienbasierte X-Achse und ordnen Sie Ihre Datens\u00e4tze einem Reihenobjekt mit type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nECharts in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'bar',\r\n            data: [120, 200, 150, 80, 70, 110, 130]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nECharts in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Fortgeschrittene strukturelle Techniken<\/h2>\n
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\u00e4nden.<\/p>\n
Vergleich mehrerer Reihen<\/h3>\n
Um mehrere Datens\u00e4tze nebeneinander zu vergleichen (z.\u202fB. Umsatz im Jahresvergleich), f\u00fcgen Sie mehrere Objekte innerhalb des series<\/code>Array hinzu. Der Layout-Engine werden die zugeh\u00f6rigen S\u00e4ulen pro Kategorie entlang der X-Achse gruppiert:<\/p>\n
\n
\nECharts<\/span>\n\n<\/path><\/path><\/svg>\nECharts in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Umsatz 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Umsatz 2026',\r\n            type: 'bar',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nECharts in VPasCode bearbeiten<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Benutzerdefinierte Spaltenstile und individuelle Hervorhebungen<\/h3>\n
Sie k\u00f6nnen globale Stile auf eine gesamte Serie anwenden oder direkt auf bestimmte Datenpunkte zielen. Dies ist besonders n\u00fctzlich, um wichtige Ereignisse, Ausrei\u00dfer oder spezifische Ziele hervorzuheben.<\/p>\n