{"id":2070,"date":"2026-07-27T01:32:54","date_gmt":"2026-07-27T01:32:54","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/area-chart-volume-trends-and-quantitative-area-guide\/"},"modified":"2026-07-27T01:32:54","modified_gmt":"2026-07-27T01:32:54","slug":"area-chart-volume-trends-and-quantitative-area-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","title":{"rendered":"Fl\u00e4chendiagramm: Volumentrends und quantitative Fl\u00e4chen"},"content":{"rendered":"

Um sowohl die Trendrichtung als auch das Gesamtvolumen \u00fcber kontinuierliche Zeit hervorzuheben, bietet das Fl\u00e4chendiagramm<\/strong> bietet einen ausdrucksstarken visuellen Ansatz. Durch Ausf\u00fcllen des Bereichs zwischen der Trendlinie und der horizontalen Achse lenken Fl\u00e4chendiagramme die Aufmerksamkeit auf relative Gr\u00f6\u00dfenordnung und Gesamtvolumenver\u00e4nderungen \u00fcber Sequenzen hinweg, wie beispielsweise die Server-Bandbreitennutzung, die Anzahl aktiver Nutzer oder der t\u00e4gliche Transaktionsdurchsatz.<\/p>\n

Die Funktionsweise von Fl\u00e4chendiagrammen<\/h2>\n

Fl\u00e4chendiagramme basieren direkt auf der Konfiguration von Liniendiagrammen. Durch Festlegen von type: 'line'<\/code> und Hinzuf\u00fcgen einer areaStyle<\/code>Eigenschaft in einem Serienobjekt f\u00fcllt der Rendering-Engine automatisch den geometrischen Raum unterhalb des Linienpfads bis zur horizontalen Grundlinie aus.<\/p>\n

1. Grundlegende Einrichtung<\/h3>\n

Um ein einfaches Fl\u00e4chendiagramm zu erstellen, definieren Sie eine kontinuierliche X-Achse, legen Sie die Serie type: 'line'<\/code>, und deklarieren Sie ein leeres oder angepasstes areaStyle<\/code>Objekt:<\/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    tooltip: {\r\n        trigger: 'axis'\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        boundaryGap: false,\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: 'line',\r\n            smooth: true,\r\n            areaStyle: {}, \/\/ Aktiviert die Standardfl\u00e4chenf\u00fcllung\r\n            data: [820, 932, 901, 934, 1290, 1330, 1320]\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            \n<\/p><\/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
Fl\u00e4chendiagramme k\u00f6nnen durch moderne Farbverl\u00e4ufe und sanfte Kurven verbessert werden, um Lesbarkeit und visuelle Qualit\u00e4t zu steigern.<\/p>\n
1. Farbverlaufsf\u00fcllung<\/h3>\n
Eine einfarbige F\u00fcllung kann manchmal schwer wirken. Durch Anwendung eines halbtransparenten linearen Verlaufs entsteht ein modernes, schmales Erscheinungsbild, bei dem die F\u00fcllung sanft in Richtung der unteren Achse verblasst:<\/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    tooltip: {\r\n        trigger: 'axis'\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        boundaryGap: false,\r\n        data: ['Jan', 'Feb', 'M\u00e4r', 'Apr', 'Mai', 'Jun']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'line',\r\n            smooth: true,\r\n            lineStyle: {\r\n                width: 3,\r\n                color: '#5470c6'\r\n            },\r\n            areaStyle: {\r\n                opacity: 0.8,\r\n                color: {\r\n                    type: 'linear',\r\n                    x: 0,\r\n                    y: 0,\r\n                    x2: 0,\r\n                    y2: 1,\r\n                    colorStops: [\r\n                        { offset: 0, color: 'rgba(84, 112, 198, 0.6)' },\r\n                        { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }\r\n                    ]\r\n                }\r\n            },\r\n            data: [320, 450, 410, 680, 890, 950]\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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nECharts in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. \u00dcberlappende Vergleich mehrerer Fl\u00e4chenreihen<\/h3>\n
Wenn mehrere Fl\u00e4chenreihen in einem einzigen Diagramm dargestellt werden, ist die Anpassung der F\u00fcll-Transparenz entscheidend, damit die zugrundeliegenden Datenpfade vollst\u00e4ndig sichtbar bleiben:<\/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    tooltip: {\r\n        trigger: 'axis'\r\n    },\r\n    legend: {\r\n        data: ['Eingehender Verkehr', 'Ausgehender Verkehr']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        boundaryGap: false,\r\n        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Eingehender Verkehr',\r\n            type: 'line',\r\n            smooth: true,\r\n            areaStyle: { opacity: 0.4 },\r\n            data: [120, 200, 450, 600, 700, 380]\r\n        },\r\n        {\r\n            name: 'Ausgehender Verkehr',\r\n            type: 'line',\r\n            smooth: true,\r\n            areaStyle: { opacity: 0.4 },\r\n            data: [80, 140, 310, 420, 510, 260]\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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nECharts in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Feinabstimmung von Layout und Abst\u00e4nden<\/h2>\n
Da Fl\u00e4chenf\u00fcllungen bis zur Y-Achsen-Basis reichen, sorgt die Konfiguration kontinuierlicher Randabst\u00e4nde daf\u00fcr, dass die F\u00fcllung sauber mit dem Rand der Zeichenfl\u00e4che ausgerichtet bleibt.<\/p>\n
1. Nahtlose Ausrichtung der Kanten<\/h3>\n
Durch die Einstellung von boundaryGap: false<\/code>auf der Kategorien-X-Achse beginnt die F\u00fcllung am absoluten linken Rand des Container-Rasters und endet sauber am rechten Rand:<\/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    grid: {\r\n        left: '3%',\r\n        right: '4%',\r\n        bottom: '3%',\r\n        containLabel: true\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        boundaryGap: false,\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            type: 'line',\r\n            smooth: true,\r\n            symbol: 'circle',\r\n            symbolSize: 6,\r\n            areaStyle: {\r\n                color: 'rgba(145, 204, 117, 0.3)'\r\n            },\r\n            lineStyle: {\r\n                color: '#91cc75',\r\n                width: 2\r\n            },\r\n            data: [150, 230, 224, 318]\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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nECharts in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Strategische Best Practices<\/h2>\n
    \n
  • Niedrige F\u00fcll-Opazit\u00e4ten verwenden:<\/strong>Harte Fl\u00e4chenf\u00fcllungen blockieren die darunterliegenden Gitterlinien und \u00fcberlappende Serien. Halten Sie immer Transparenzlevel zwischen 20 % und 50 % f\u00fcr hohe Kontrastwerte.<\/li>\n
  • Begrenzen Sie die Serien auf 2 oder 3:<\/strong>Zu viele \u00fcberlappende Fl\u00e4chenformen verursachen visuelle Verwirrung. Verwenden Sie f\u00fcr 4 oder mehr kumulative kontinuierliche Datens\u00e4tze stattdessen ein gestacktes Fl\u00e4chen-Diagramm.<\/li>\n
  • Setzen Sie boundaryGap: false<\/code>:<\/strong>Das Entfernen horizontaler R\u00e4nder auf Zeitachsen erm\u00f6glicht es, dass Fl\u00e4chenf\u00fcllungen die gesamte Rasterbreite einnehmen, ohne unangenehme leere Abst\u00e4nde an den linken und rechten R\u00e4ndern zu hinterlassen.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Um sowohl die Trendrichtung als auch das Gesamtvolumen \u00fcber kontinuierliche Zeit hervorzuheben, bietet das Fl\u00e4chendiagramm bietet einen ausdrucksstarken visuellen Ansatz. Durch Ausf\u00fcllen des Bereichs zwischen der Trendlinie und der horizontalen Achse lenken Fl\u00e4chendiagramme die Aufmerksamkeit auf relative Gr\u00f6\u00dfenordnung und Gesamtvolumenver\u00e4nderungen…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":6,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2070","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Area Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Render quantitative volume charts with ECharts filled area graphs in VPasCode, an intuitive diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Area Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Render quantitative volume charts with ECharts filled area graphs in VPasCode, an intuitive diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b6fdc77fe.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\",\"name\":\"ECharts Area Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b6fdc77fe.png\",\"datePublished\":\"2026-07-27T01:32:54+00:00\",\"description\":\"Render quantitative volume charts with ECharts filled area graphs in VPasCode, an intuitive diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b6fdc77fe.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b6fdc77fe.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Fl\u00e4chendiagramm: Volumentrends und quantitative Fl\u00e4chen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Area Chart Guide | VPasCode Text to Diagram Tool","description":"Render quantitative volume charts with ECharts filled area graphs in VPasCode, an intuitive diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","og_locale":"de_DE","og_type":"article","og_title":"ECharts Area Chart Guide | VPasCode Text to Diagram Tool","og_description":"Render quantitative volume charts with ECharts filled area graphs in VPasCode, an intuitive diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b6fdc77fe.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","name":"ECharts Area Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b6fdc77fe.png","datePublished":"2026-07-27T01:32:54+00:00","description":"Render quantitative volume charts with ECharts filled area graphs in VPasCode, an intuitive diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b6fdc77fe.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b6fdc77fe.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Fl\u00e4chendiagramm: Volumentrends und quantitative Fl\u00e4chen"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/2070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2070"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}