{"id":2072,"date":"2026-07-27T01:32:54","date_gmt":"2026-07-27T01:32:54","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","title":{"rendered":"Graphique de surface : tendances du volume et surface quantitative"},"content":{"rendered":"

Pour mettre en \u00e9vidence \u00e0 la fois la direction de la tendance et le volume global au fil du temps continu, le Graphique de surface<\/strong>offre une approche visuelle expressive. En remplissant la r\u00e9gion situ\u00e9e entre la ligne de tendance et l’axe horizontal, les graphiques de surface mettent l’accent sur la magnitude relative et les variations totales du volume \u00e0 travers des s\u00e9quences, telles que la consommation de bande passante du serveur, le volume d’utilisateurs actifs ou le d\u00e9bit quotidien des transactions.<\/p>\n

Le fonctionnement des graphiques de surface<\/h2>\n

Les graphiques de surface s’appuient directement sur la configuration du graphique en lignes. En d\u00e9finissant type: 'line'<\/code> et en incluant une propri\u00e9t\u00e9 areaStyle<\/code>dans un objet de s\u00e9rie, le moteur de rendu remplit automatiquement l’espace g\u00e9om\u00e9trique situ\u00e9 sous le trac\u00e9 de la ligne jusqu’\u00e0 la ligne de base horizontale.<\/p>\n

1. Configuration essentielle<\/h3>\n

Pour cr\u00e9er un graphique de surface basique, d\u00e9finissez un axe X continu, d\u00e9finissez la s\u00e9rie type: 'line'<\/code>, et d\u00e9clarez un objet areaStyle<\/code>vide ou personnalis\u00e9 :<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/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: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']\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: {}, \/\/ Active le remplissage par d\u00e9faut\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Techniques structurelles avanc\u00e9es<\/h2>\n
Les graphiques de surface peuvent \u00eatre am\u00e9lior\u00e9s gr\u00e2ce \u00e0 des d\u00e9grad\u00e9s de couleurs modernes et des courbes douces afin d’am\u00e9liorer la lisibilit\u00e9 et l’esth\u00e9tique visuelle.<\/p>\n
1. Style de remplissage en d\u00e9grad\u00e9<\/h3>\n
Un remplissage en couleur solide peut parfois para\u00eetre lourd. Appliquer un d\u00e9grad\u00e9 lin\u00e9aire semi-transparent cr\u00e9e une apparence moderne et \u00e9l\u00e9gante o\u00f9 le remplissage s’estompe doucement vers l’axe inf\u00e9rieur :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/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', 'F\u00e9v', 'Mar', 'Avr', 'Mai', 'Juin']\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. Comparaison superpos\u00e9e de plusieurs s\u00e9ries de surfaces<\/h3>\n
Lorsqu’on affiche plusieurs s\u00e9ries de surfaces dans un m\u00eame graphique, il est crucial d’ajuster l’opacit\u00e9 du remplissage afin que les trajectoires de donn\u00e9es sous-jacentes restent pleinement visibles :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/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: ['Trafic entrant', 'Trafic sortant']\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: 'Trafic entrant',\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: 'Trafic sortant',\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Affinage du layout et des espacements<\/h2>\n
\u00c9tant donn\u00e9 que les remplissages de zone s’\u00e9tendent jusqu’\u00e0 la ligne de base de l’axe Y, configurer des espaces continus aux bords maintient le remplissage align\u00e9 proprement avec la bordure du canevas.<\/p>\n
1. Alignement sans couture des bords<\/h3>\n
En d\u00e9finissant boundaryGap: false<\/code>sur l’axe X cat\u00e9goriel, le remplissage commence au bord gauche absolu de la grille du conteneur et se termine proprement au bord droit :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/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: ['T1', 'T2', 'T3', 'T4']\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>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Meilleures pratiques strat\u00e9giques<\/h2>\n
    \n
  • Utilisez des opacit\u00e9s de remplissage faibles :<\/strong>Les remplissages de zone solides masquent les lignes de grille sous-jacentes et les s\u00e9ries superpos\u00e9es. Maintenez toujours des niveaux de transparence compris entre 20 % et 50 % pour un contraste \u00e9lev\u00e9.<\/li>\n
  • Limitez les s\u00e9ries \u00e0 2 ou 3 :<\/strong>Trop de formes de zone superpos\u00e9es entra\u00eenent une confusion visuelle. Pour 4 ou plus jeux de donn\u00e9es cumulatifs continus, utilisez plut\u00f4t un graphique \u00e0 aires empil\u00e9es.<\/li>\n
  • D\u00e9finissez boundaryGap: false<\/code>:<\/strong>Supprimer les marges horizontales sur les axes temporels permet aux remplissages de zone de s’\u00e9tendre sur toute la largeur de la grille sans laisser des espaces vides g\u00eanants sur les bords gauche et droit.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Pour mettre en \u00e9vidence \u00e0 la fois la direction de la tendance et le volume global au fil du temps continu, le Graphique de surfaceoffre une approche visuelle expressive. En remplissant la r\u00e9gion situ\u00e9e entre la ligne de tendance et…<\/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-2072","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\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Graphique de surface : tendances du volume et surface quantitative\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/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\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","og_locale":"fr_FR","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\/fr\/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":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","url":"https:\/\/www.vpascode.com\/fr\/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\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Graphique de surface : tendances du volume et surface quantitative"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2072"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}