{"id":2064,"date":"2026-07-27T01:32:54","date_gmt":"2026-07-27T01:32:54","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 v\u00f9ng: Xu h\u01b0\u1edbng kh\u1ed1i l\u01b0\u1ee3ng v\u00e0 di\u1ec7n t\u00edch \u0111\u1ecbnh l\u01b0\u1ee3ng"},"content":{"rendered":"

\u0110\u1ec3 nh\u1ea5n m\u1ea1nh c\u1ea3 h\u01b0\u1edbng xu h\u01b0\u1edbng v\u00e0 kh\u1ed1i l\u01b0\u1ee3ng t\u1ed5ng th\u1ec3 theo th\u1eddi gian li\u00ean t\u1ee5c, th\u00ecBi\u1ec3u \u0111\u1ed3 v\u00f9ng<\/strong>cung c\u1ea5p m\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn tr\u1ef1c quan sinh \u0111\u1ed9ng. B\u1eb1ng c\u00e1ch \u0111i\u1ec1n \u0111\u1ea7y v\u00f9ng gi\u1eefa \u0111\u01b0\u1eddng xu h\u01b0\u1edbng v\u00e0 tr\u1ee5c ngang, bi\u1ec3u \u0111\u1ed3 v\u00f9ng thu h\u00fat s\u1ef1 ch\u00fa \u00fd v\u00e0o \u0111\u1ed9 l\u1edbn t\u01b0\u01a1ng \u0111\u1ed1i v\u00e0 s\u1ef1 thay \u0111\u1ed5i kh\u1ed1i l\u01b0\u1ee3ng t\u1ed5ng th\u1ec3 qua c\u00e1c chu\u1ed7i d\u1eef li\u1ec7u, ch\u1eb3ng h\u1ea1n nh\u01b0 ti\u00eau th\u1ee5 b\u0103ng th\u00f4ng m\u00e1y ch\u1ee7, kh\u1ed1i l\u01b0\u1ee3ng ng\u01b0\u1eddi d\u00f9ng ho\u1ea1t \u0111\u1ed9ng, ho\u1eb7c l\u01b0u l\u01b0\u1ee3ng giao d\u1ecbch h\u00e0ng ng\u00e0y.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a bi\u1ec3u \u0111\u1ed3 v\u00f9ng<\/h2>\n

Bi\u1ec3u \u0111\u1ed3 v\u00f9ng \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng tr\u1ef1c ti\u1ebfp t\u1eeb c\u1ea5u h\u00ecnh bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng. B\u1eb1ng c\u00e1ch thi\u1ebft l\u1eadptype: 'line'<\/code>v\u00e0 bao g\u1ed3m m\u1ed9tareaStyle<\/code>t\u00ednh n\u0103ng tr\u00ean m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng chu\u1ed7i, b\u1ed9 x\u1eed l\u00fd hi\u1ec3n th\u1ecb s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1n kh\u00f4ng gian h\u00ecnh h\u1ecdc ph\u00eda d\u01b0\u1edbi \u0111\u01b0\u1eddng \u0111i \u0111\u1ebfn \u0111\u01b0\u1eddng chu\u1ea9n ngang.<\/p>\n

1. C\u00e0i \u0111\u1eb7t c\u01a1 b\u1ea3n<\/h3>\n

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 v\u00f9ng c\u01a1 b\u1ea3n, x\u00e1c \u0111\u1ecbnh tr\u1ee5c X li\u00ean t\u1ee5c, \u0111\u1eb7t seriestype: 'line'<\/code>, v\u00e0 khai b\u00e1o m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ngareaStyle<\/code>r\u1ed7ng ho\u1eb7c \u0111\u01b0\u1ee3c t\u00f9y ch\u1ec9nh:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong 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: ['Th\u1ee9 Hai', 'Th\u1ee9 Ba', 'Th\u1ee9 T\u01b0', 'Th\u1ee9 N\u0103m', 'Th\u1ee9 S\u00e1u', 'Th\u1ee9 B\u1ea3y', 'Ch\u1ee7 Nh\u1eadt']\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: {}, \/\/ K\u00edch ho\u1ea1t \u0111i\u1ec1n v\u00f9ng m\u1eb7c \u0111\u1ecbnh\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c k\u1ef9 thu\u1eadt c\u1ea5u tr\u00fac n\u00e2ng cao<\/h2>\n
Bi\u1ec3u \u0111\u1ed3 v\u00f9ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c n\u00e2ng cao b\u1eb1ng c\u00e1c d\u1ea3i m\u00e0u hi\u1ec7n \u0111\u1ea1i v\u00e0 \u0111\u01b0\u1eddng cong m\u01b0\u1ee3t m\u00e0 \u0111\u1ec3 c\u1ea3i thi\u1ec7n \u0111\u1ed9 d\u1ec5 \u0111\u1ecdc v\u00e0 v\u1ebb ngo\u00e0i tr\u1ef1c quan.<\/p>\n
1. \u0110\u1ecbnh d\u1ea1ng \u0111i\u1ec1n d\u1ea3i m\u00e0u<\/h3>\n
Vi\u1ec7c \u0111i\u1ec1n m\u00e0u \u0111\u1ed3ng nh\u1ea5t \u0111\u00f4i khi c\u00f3 c\u1ea3m gi\u00e1c n\u1eb7ng n\u1ec1. \u00c1p d\u1ee5ng d\u1ea3i m\u00e0u tuy\u1ebfn t\u00ednh b\u00e1n trong su\u1ed1t s\u1ebd t\u1ea1o ra v\u1ebb ngo\u00e0i hi\u1ec7n \u0111\u1ea1i, tinh t\u1ebf, n\u01a1i ph\u1ea7n \u0111i\u1ec1n d\u1ea7n m\u1edd d\u1ea7n v\u1ec1 tr\u1ee5c ngang ph\u00eda d\u01b0\u1edbi:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong 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: ['Th\u00e1ng 1', 'Th\u00e1ng 2', 'Th\u00e1ng 3', 'Th\u00e1ng 4', 'Th\u00e1ng 5', 'Th\u00e1ng 6']\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
2. So s\u00e1nh bi\u1ec3u \u0111\u1ed3 v\u00f9ng \u0111a chu\u1ed7i ch\u1ed3ng l\u1ea5n<\/h3>\n
Khi hi\u1ec3n th\u1ecb nhi\u1ec1u chu\u1ed7i bi\u1ec3u \u0111\u1ed3 v\u00f9ng trong m\u1ed9t bi\u1ec3u \u0111\u1ed3 duy nh\u1ea5t, vi\u1ec7c \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 m\u1edd \u0111i\u1ec1n l\u00e0 r\u1ea5t quan tr\u1ecdng \u0111\u1ec3 c\u00e1c \u0111\u01b0\u1eddng d\u1eef li\u1ec7u n\u1ec1n v\u1eabn ho\u00e0n to\u00e0n r\u00f5 r\u00e0ng:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong 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: 'tr\u1ee5c'\r\n    },\r\n    legend: {\r\n        data: ['L\u01b0u l\u01b0\u1ee3ng \u0111\u1ebfn', 'L\u01b0u l\u01b0\u1ee3ng \u0111i']\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: 'L\u01b0u l\u01b0\u1ee3ng \u0111\u1ebfn',\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: 'L\u01b0u l\u01b0\u1ee3ng \u0111i',\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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Tinh ch\u1ec9nh b\u1ed1 c\u1ee5c v\u00e0 kho\u1ea3ng c\u00e1ch<\/h2>\n
V\u00ec ph\u1ea7n \u0111\u1ed5 m\u00e0u k\u00e9o d\u00e0i \u0111\u1ebfn t\u1eadn \u0111\u01b0\u1eddng c\u01a1 s\u1edf tr\u1ee5c Y, n\u00ean c\u1ea5u h\u00ecnh kho\u1ea3ng c\u00e1ch bi\u00ean li\u00ean t\u1ee5c s\u1ebd gi\u1eef cho ph\u1ea7n \u0111\u1ed5 m\u00e0u \u0111\u01b0\u1ee3c c\u0103n ch\u1ec9nh g\u1ecdn g\u00e0ng v\u1edbi vi\u1ec1n khung h\u00ecnh.<\/p>\n
1. C\u0103n ch\u1ec9nh m\u00e9p li\u1ec1n m\u1ea1ch<\/h3>\n
B\u1eb1ng c\u00e1ch thi\u1ebft l\u1eadpboundaryGap: false<\/code>tr\u00ean tr\u1ee5c X lo\u1ea1i danh m\u1ee5c, ph\u1ea7n \u0111\u1ed5 m\u00e0u b\u1eaft \u0111\u1ea7u t\u1eeb m\u00e9p tr\u00e1i tuy\u1ec7t \u0111\u1ed1i c\u1ee7a l\u01b0\u1edbi ch\u1ee9a v\u00e0 k\u1ebft th\u00fac g\u1ecdn g\u00e0ng \u1edf ph\u00eda b\u00ean ph\u1ea3i:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong 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: ['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>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • S\u1eed d\u1ee5ng \u0111\u1ed9 m\u1edd \u0111\u1ed5 m\u00e0u th\u1ea5p:<\/strong>C\u00e1c v\u00f9ng \u0111\u1ed5 m\u00e0u \u0111\u1ea7y s\u1ebd che khu\u1ea5t c\u00e1c \u0111\u01b0\u1eddng l\u01b0\u1edbi n\u1ec1n v\u00e0 c\u00e1c chu\u1ed7i ch\u1ed3ng ch\u00e9o. Lu\u00f4n duy tr\u00ec m\u1ee9c \u0111\u1ed9 trong su\u1ed1t kho\u1ea3ng 20% \u0111\u1ebfn 50% \u0111\u1ec3 t\u1ea1o \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n cao.<\/li>\n
  • Gi\u1eef s\u1ed1 l\u01b0\u1ee3ng chu\u1ed7i \u1edf m\u1ee9c 2 ho\u1eb7c 3:<\/strong>Qu\u00e1 nhi\u1ec1u h\u00ecnh d\u1ea1ng v\u00f9ng ch\u1ed3ng ch\u00e9o s\u1ebd g\u00e2y nh\u1ea7m l\u1eabn v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c. \u0110\u1ed1i v\u1edbi 4 ho\u1eb7c nhi\u1ec1u h\u01a1n b\u1ed9 d\u1eef li\u1ec7u t\u00edch l\u0169y li\u00ean t\u1ee5c, h\u00e3y s\u1eed d\u1ee5ng bi\u1ec3u \u0111\u1ed3 v\u00f9ng ch\u1ed3ng thay v\u00e0o \u0111\u00f3.<\/li>\n
  • Thi\u1ebft l\u1eadpboundaryGap: false<\/code>:<\/strong>Lo\u1ea1i b\u1ecf kho\u1ea3ng c\u00e1ch ngang tr\u00ean tr\u1ee5c th\u1eddi gian cho ph\u00e9p ph\u1ea7n \u0111\u1ed5 m\u00e0u bao ph\u1ee7 to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng l\u01b0\u1edbi m\u00e0 kh\u00f4ng \u0111\u1ec3 l\u1ea1i kho\u1ea3ng tr\u1ed1ng tr\u1ed1ng r\u1ed7ng kh\u00f3 ch\u1ecbu \u1edf hai m\u00e9p tr\u00e1i v\u00e0 ph\u1ea3i.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    \u0110\u1ec3 nh\u1ea5n m\u1ea1nh c\u1ea3 h\u01b0\u1edbng xu h\u01b0\u1edbng v\u00e0 kh\u1ed1i l\u01b0\u1ee3ng t\u1ed5ng th\u1ec3 theo th\u1eddi gian li\u00ean t\u1ee5c, th\u00ecBi\u1ec3u \u0111\u1ed3 v\u00f9ngcung c\u1ea5p m\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn tr\u1ef1c quan sinh \u0111\u1ed9ng. B\u1eb1ng c\u00e1ch \u0111i\u1ec1n \u0111\u1ea7y v\u00f9ng gi\u1eefa \u0111\u01b0\u1eddng xu h\u01b0\u1edbng v\u00e0 tr\u1ee5c…<\/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-2064","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\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\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\/vn\/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=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/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\\\/vn\\\/docs\\\/vpascode-docs\\\/area-chart-volume-trends-and-quantitative-area-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bi\u1ec3u \u0111\u1ed3 v\u00f9ng: Xu h\u01b0\u1edbng kh\u1ed1i l\u01b0\u1ee3ng v\u00e0 di\u1ec7n t\u00edch \u0111\u1ecbnh l\u01b0\u1ee3ng\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/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\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","og_locale":"vi_VN","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\/vn\/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":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/","url":"https:\/\/www.vpascode.com\/vn\/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\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/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\/vn\/docs\/vpascode-docs\/area-chart-volume-trends-and-quantitative-area-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/vn\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/vn\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Bi\u1ec3u \u0111\u1ed3 v\u00f9ng: Xu h\u01b0\u1edbng kh\u1ed1i l\u01b0\u1ee3ng v\u00e0 di\u1ec7n t\u00edch \u0111\u1ecbnh l\u01b0\u1ee3ng"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/2064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2064"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}