{"id":2070,"date":"2026-07-27T01:32:54","date_gmt":"2026-07-27T01:32:54","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","title":{"rendered":"Gr\u00e1fico de \u00e1rea: tendencias de volumen y \u00e1rea cuantitativa"},"content":{"rendered":"

Para enfatizar tanto la direcci\u00f3n de la tendencia como el volumen total a lo largo del tiempo continuo, el Gr\u00e1fico de \u00e1rea<\/strong>proporciona un enfoque visual expresivo. Al rellenar la regi\u00f3n entre la l\u00ednea de tendencia y el eje horizontal, los gr\u00e1ficos de \u00e1rea destacan la magnitud relativa y los cambios totales en el volumen a lo largo de secuencias, como el consumo de ancho de banda del servidor, el volumen de usuarios activos o el tr\u00e1fico diario de transacciones.<\/p>\n

La mec\u00e1nica de los gr\u00e1ficos de \u00e1rea<\/h2>\n

Los gr\u00e1ficos de \u00e1rea se basan directamente en la configuraci\u00f3n del gr\u00e1fico de l\u00edneas. Al establecer type: 'line'<\/code> y incluyendo un areaStyle<\/code>propiedad en un objeto de serie, el motor de renderizado rellena autom\u00e1ticamente el espacio geom\u00e9trico debajo de la trayectoria de la l\u00ednea hasta la l\u00ednea base horizontal.<\/p>\n

1. Configuraci\u00f3n esencial<\/h3>\n

Para crear un gr\u00e1fico de \u00e1rea b\u00e1sico, define un eje X continuo, establece la serie type: 'line'<\/code>, y declara un objeto areaStyle<\/code>vac\u00edo o personalizado:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar ECharts en 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', 'Mi\u00e9', 'Jue', 'Vie', 'S\u00e1b', 'Dom']\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: {}, \/\/ Habilita el relleno de \u00e1rea predeterminado\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>
\nEditar ECharts en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
T\u00e9cnicas estructurales avanzadas<\/h2>\n
Los gr\u00e1ficos de \u00e1rea pueden mejorarse con gradientes de color modernos y curvas suaves para mejorar la legibilidad y el acabado visual.<\/p>\n
1. Estilo de relleno con degradado<\/h3>\n
Un relleno de color s\u00f3lido a veces puede sentirse pesado. Aplicar un degradado lineal semitransparente crea una apariencia moderna y elegante donde el relleno se desvanece suavemente hacia el eje inferior:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar ECharts en 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: ['Ene', 'Feb', 'Mar', 'Abr', 'May', '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>
\nEditar ECharts en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. Comparaci\u00f3n de \u00e1reas m\u00faltiples superpuestas<\/h3>\n
Cuando se muestran m\u00faltiples series de \u00e1reas en un solo gr\u00e1fico, ajustar la opacidad del relleno es crucial para que las rutas de datos subyacentes permanezcan completamente visibles:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar ECharts en 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    leyenda: {\r\n        datos: ['Tr\u00e1fico entrante', 'Tr\u00e1fico saliente']\r\n    },\r\n    ejeX: {\r\n        tipo: 'categor\u00eda',\r\n        margenDeBorde: false,\r\n        datos: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']\r\n    },\r\n    ejeY: {\r\n        tipo: 'valor'\r\n    },\r\n    series: [\r\n        {\r\n            nombre: 'Tr\u00e1fico entrante',\r\n            tipo: 'l\u00ednea',\r\n            suave: true,\r\n            estiloDeArea: { opacidad: 0.4 },\r\n            datos: [120, 200, 450, 600, 700, 380]\r\n        },\r\n        {\r\n            nombre: 'Tr\u00e1fico saliente',\r\n            tipo: 'l\u00ednea',\r\n            suave: true,\r\n            estiloDeArea: { opacidad: 0.4 },\r\n            datos: [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>
\nEditar ECharts en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Ajuste fino del dise\u00f1o y el espaciado<\/h2>\n
Dado que los rellenos de \u00e1rea se extienden hasta la l\u00ednea base del eje Y, configurar m\u00e1rgenes de borde continuos mantiene el relleno alineado limpiamente con el borde de la superficie de dibujo.<\/p>\n
1. Alineaci\u00f3n continua de bordes<\/h3>\n
Al establecer margenDeBorde: false<\/code>en el eje X de categor\u00eda, el relleno comienza en el borde izquierdo absoluto de la cuadr\u00edcula del contenedor y termina limpiamente en el extremo derecho:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar ECharts en 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    cuadr\u00edcula: {\r\n        izquierda: '3%',\r\n        derecha: '4%',\r\n        abajo: '3%',\r\n        contieneEtiqueta: true\r\n    },\r\n    ejeX: {\r\n        tipo: 'categor\u00eda',\r\n        margenDeBorde: false,\r\n        datos: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    ejeY: {\r\n        tipo: 'valor'\r\n    },\r\n    series: [\r\n        {\r\n            tipo: 'l\u00ednea',\r\n            suave: true,\r\n            s\u00edmbolo: 'c\u00edrculo',\r\n            tama\u00f1oDeS\u00edmbolo: 6,\r\n            estiloDeArea: {\r\n                color: 'rgba(145, 204, 117, 0.3)'\r\n            },\r\n            estiloDeL\u00ednea: {\r\n                color: '#91cc75',\r\n                ancho: 2\r\n            },\r\n            datos: [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>
\nEditar ECharts en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Pr\u00e1cticas recomendadas estrat\u00e9gicas<\/h2>\n
    \n
  • Utilice opacidades bajas de relleno:<\/strong>Los rellenos de \u00e1rea s\u00f3lidos bloquean las l\u00edneas de cuadr\u00edcula subyacentes y las series superpuestas. Mantenga siempre niveles de transparencia alrededor del 20% al 50% para un alto contraste.<\/li>\n
  • Mantenga las series en 2 o 3:<\/strong>Demasiadas formas de \u00e1rea superpuestas causan confusi\u00f3n visual. Para 4 o m\u00e1s conjuntos de datos continuos acumulativos, utilice en su lugar un gr\u00e1fico de \u00e1rea apilada.<\/li>\n
  • Establezca margenDeBorde: false<\/code>:<\/strong>Eliminar los m\u00e1rgenes horizontales en los ejes de tiempo permite que los rellenos de \u00e1rea cubran el ancho total de la cuadr\u00edcula sin dejar huecos inc\u00f3modos en los bordes izquierdo y derecho.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Para enfatizar tanto la direcci\u00f3n de la tendencia como el volumen total a lo largo del tiempo continuo, el Gr\u00e1fico de \u00e1reaproporciona un enfoque visual expresivo. Al rellenar la regi\u00f3n entre la l\u00ednea de tendencia y el eje horizontal, los…<\/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\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gr\u00e1fico de \u00e1rea: tendencias de volumen y \u00e1rea cuantitativa\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/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\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","og_locale":"es_ES","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\/es\/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":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","url":"https:\/\/www.vpascode.com\/es\/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\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Gr\u00e1fico de \u00e1rea: tendencias de volumen y \u00e1rea cuantitativa"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2070"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}