{"id":2053,"date":"2026-07-27T02:21:52","date_gmt":"2026-07-27T02:21:52","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/"},"modified":"2026-07-27T02:21:52","modified_gmt":"2026-07-27T02:21:52","slug":"treemap-chart-hierarchical-volumes-and-nested-proportions-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 Treemap: Th\u1ec3 t\u00edch ph\u00e2n c\u1ea5p v\u00e0 t\u1ef7 l\u1ec7 l\u1ed3ng gh\u00e9p"},"content":{"rendered":"

Khi tr\u00ecnh b\u00e0y c\u00e1c t\u1eadp d\u1eef li\u1ec7u ph\u00e2n c\u1ea5p nhi\u1ec1u c\u1ea5p \u0111\u1ed9 ho\u1eb7c hi\u1ec3n th\u1ecb c\u00e1c ph\u00e2n t\u00edch tr\u1ef1c quan l\u1edbn n\u01a1i kh\u00f4ng gian l\u00e0 y\u1ebfu t\u1ed1 qu\u00fd gi\u00e1, th\u00ecBi\u1ec3u \u0111\u1ed3 Treemap<\/strong> cung c\u1ea5p m\u1ed9t gi\u1ea3i ph\u00e1p tr\u1ef1c quan hi\u1ec7u qu\u1ea3. B\u1eb1ng c\u00e1ch gh\u00e9p c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt l\u1ed3ng gh\u00e9p v\u00e0o m\u1ed9t khu v\u1ef1c gi\u1edbi h\u1ea1n duy nh\u1ea5t, bi\u1ec3u \u0111\u1ed3 Treemap m\u00e3 h\u00f3a c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1 h\u1ecdc th\u00f4ng qua k\u00edch th\u01b0\u1edbc di\u1ec7n t\u00edch h\u00ecnh ch\u1eef nh\u1eadt, cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng \u0111\u00e1nh gi\u00e1t\u1ef7 l\u1ec7 t\u01b0\u01a1ng \u0111\u1ed1i qua c\u00e1c c\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p ph\u1ee9c t\u1ea1p<\/em>\u2014v\u00ed d\u1ee5 nh\u01b0 s\u1eed d\u1ee5ng dung l\u01b0\u1ee3ng \u0111\u0129a, doanh thu danh m\u1ee5c s\u1ea3n ph\u1ea9m, ho\u1eb7c ph\u00e2n b\u1ed5 ng\u00e2n s\u00e1ch gi\u1eefa c\u00e1c ph\u00f2ng ban cha v\u00e0 con.<\/p>\n

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

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 Treemap s\u1eed d\u1ee5ngtype: 'treemap'<\/code>. Chu\u1ed7i d\u1eef li\u1ec7u mong \u0111\u1ee3i m\u1ed9t m\u1ea3ng c\u1ea5u tr\u00fac c\u00e2y n\u01a1i m\u1ed7i \u0111\u1ed1i t\u01b0\u1ee3ng ch\u1ee9a m\u1ed9td\u1eef li\u1ec7u<\/code>m\u1ea3ng n\u01a1i m\u1ed7i \u0111\u1ed1i t\u01b0\u1ee3ng ch\u1ee9a m\u1ed9tt\u00ean<\/code>, m\u1ed9tgi\u00e1 tr\u1ecb \u0111\u1ecbnh l\u01b0\u1ee3ng<\/code>, v\u00e0 m\u1ed9t m\u1ea3ng t\u00f9y ch\u1ecdncon<\/code>cho c\u00e1c c\u1ea5p \u0111\u1ed9 ph\u00e2n c\u1ea5p s\u00e2u h\u01a1n.<\/p>\n

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

\u0110\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t bi\u1ec3u \u0111\u1ed3 Treemap c\u01a1 b\u1ea3n, x\u00e1c \u0111\u1ecbnh m\u1ed9t m\u1ea3ng d\u1eef li\u1ec7u ph\u00e2n c\u1ea5p v\u1edbi c\u00e1ccon<\/code>v\u00e0 thi\u1ebft l\u1eadptype: 'treemap'<\/code>trong c\u1ea5u h\u00ecnh chu\u1ed7i c\u1ee7a b\u1ea1n:<\/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        formatter: '{b}: ${c}'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'treemap',\r\n            data: [\r\n                {\r\n                    name: '\u0110i\u1ec7n t\u1eed',\r\n                    value: 400,\r\n                    children: [\r\n                        { name: '\u0110i\u1ec7n tho\u1ea1i', value: 240 },\r\n                        { name: 'M\u00e1y t\u00ednh x\u00e1ch tay', value: 160 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Th\u1eddi trang',\r\n                    value: 300,\r\n                    children: [\r\n                        { name: '\u00c1o s\u01a1 mi', value: 180 },\r\n                        { name: 'Gi\u00e0y d\u00e9p', value: 120 }\r\n                    ]\r\n                }\r\n            ]\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 Treemap c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh v\u1edbi c\u00e1c quy t\u1eafc \u0111\u1ecbnh d\u1ea1ng \u0111a c\u1ea5p, \u00e1nh x\u1ea1 d\u1ea3i m\u00e0u v\u00e0 c\u00e1c \u0111i\u1ec1u khi\u1ec3n thao t\u00e1c t\u01b0\u01a1ng t\u00e1c \u0111\u1ec3 duy\u1ec7t s\u00e2u v\u00e0o c\u00e1c c\u00e2y d\u1eef li\u1ec7u ph\u1ee9c t\u1ea1p.<\/p>\n
1. Thao t\u00e1c \u0111i\u1ec1u h\u01b0\u1edbng breadcrumb nhi\u1ec1u c\u1ea5p<\/h3>\n
B\u1eadt ch\u00fa gi\u1ea3i \u1edf \u0111\u1ea7u v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng breadcrumb \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1c danh m\u1ee5c c\u1ea5p cao nh\u1ea5t v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng tr\u01a1n tru v\u00e0o c\u00e1c th\u01b0 m\u1ee5c con l\u1ed3ng gh\u00e9p:<\/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: 'item',\r\n        formatter: '{b}: {c} GB'\r\n    },\r\n    legend: {\r\n        top: '5%',\r\n        left: 'center',\r\n        data: ['\u1ed4 h\u1ec7 th\u1ed1ng (C:)', '\u1ed4 d\u1eef li\u1ec7u (D:)']\r\n    },\r\n    series: [\r\n        {\r\n            type: 'treemap',\r\n            top: '18%',\r\n            bottom: '12%',\r\n            leafDepth: 1, \/\/ Hi\u1ec3n th\u1ecb m\u1ed9t c\u1ea5p t\u1ea1i m\u1ed9t th\u1eddi \u0111i\u1ec3m v\u1edbi thao t\u00e1c nh\u1ea5p \u0111\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng s\u00e2u\r\n            breadcrumb: {\r\n                show: true,\r\n                left: 'center',\r\n                bottom: '2%'\r\n            },\r\n            levels: [\r\n                {\r\n                    itemStyle: {\r\n                        borderColor: '#555',\r\n                        borderWidth: 2,\r\n                        gapWidth: 2\r\n                    }\r\n                },\r\n                {\r\n                    colorSaturation: [0.3, 0.6],\r\n                    itemStyle: {\r\n                        borderWidth: 1,\r\n                        gapWidth: 1,\r\n                        borderColorSaturation: 0.7\r\n                    }\r\n                }\r\n            ],\r\n            data: [\r\n                {\r\n                    name: '\u1ed4 h\u1ec7 th\u1ed1ng (C:)',\r\n                    value: 500,\r\n                    children: [\r\n                        { name: 'Windows', value: 120 },\r\n                        { name: 'T\u1ec7p ch\u01b0\u01a1ng tr\u00ecnh', value: 230 },\r\n                        { name: 'Ng\u01b0\u1eddi d\u00f9ng', value: 150 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: '\u1ed4 d\u1eef li\u1ec7u (D:)',\r\n                    value: 800,\r\n                    children: [\r\n                        { name: 'Media', value: 450 },\r\n                        { name: 'Sao l\u01b0u', value: 250 },\r\n                        { name: 'D\u1ef1 \u00e1n', value: 100 }\r\n                    ]\r\n                }\r\n            ]\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 \u0111\u1ecbnh d\u1ea1ng<\/h2>\n
\u00c1p d\u1ee5ng \u0111\u1ed9 r\u1ed9ng kho\u1ea3ng c\u00e1ch, vi\u1ec1n s\u1ea1ch s\u1ebd v\u00e0 m\u00e0u s\u1eafc c\u1ea5p \u0111\u1ed9 kh\u00e1c nhau gi\u00fap c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt l\u1ed3ng gh\u00e9p \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp g\u1ecdn g\u00e0ng v\u00e0 d\u1ec5 \u0111\u1ecdc v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c.<\/p>\n
1. Vi\u1ec1n \u00f4 t\u00f9y ch\u1ec9nh v\u00e0 c\u0103n ch\u1ec9nh nh\u00e3n<\/h3>\n
\u0110i\u1ec1u ch\u1ec9nh gapWidth<\/code> v\u00e0 label<\/code>c\u1ea5u h\u00ecnh \u0111\u1ec3 duy tr\u00ec c\u00e1c ranh gi\u1edbi r\u00f5 r\u00e0ng gi\u1eefa c\u00e1c container cha v\u00e0 c\u00e1c \u0111o\u1ea1n con:<\/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    series: [\r\n        {\r\n            type: 'treemap',\r\n            roam: false, \/\/ T\u1eaft thao t\u00e1c ph\u00f3ng to\/thu nh\u1ecf ho\u1eb7c di chuy\u1ec3n th\u1ee7 c\u00f4ng\r\n            label: {\r\n                show: true,\r\n                formatter: '{b}n{c}'\r\n            },\r\n            itemStyle: {\r\n                borderColor: '#ffffff',\r\n                borderWidth: 2,\r\n                gapWidth: 2\r\n            },\r\n            data: [\r\n                {\r\n                    name: 'B\u1eafc M\u1ef9',\r\n                    value: 520,\r\n                    itemStyle: { color: '#5470c6' }\r\n                },\r\n                {\r\n                    name: 'Ch\u00e2u \u00c2u',\r\n                    value: 380,\r\n                    itemStyle: { color: '#91cc75' }\r\n                },\r\n                {\r\n                    name: 'Ch\u00e2u \u00c1 Th\u00e1i B\u00ecnh D\u01b0\u01a1ng',\r\n                    value: 450,\r\n                    itemStyle: { color: '#fac858' }\r\n                },\r\n                {\r\n                    name: 'Ch\u00e2u M\u1ef9 Latinh',\r\n                    value: 190,\r\n                    itemStyle: { color: '#ee6666' }\r\n                }\r\n            ]\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 gapWidth<\/code>\u0111\u1ec3 t\u0103ng \u0111\u1ed9 hi\u1ec3n th\u1ecb cho c\u1ea5u tr\u00fac l\u1ed3ng gh\u00e9p:<\/strong>Th\u00eam m\u1ed9t kho\u1ea3ng c\u00e1ch nh\u1ecf gapWidth<\/code> (v\u00ed d\u1ee5: 2px \u0111\u1ebfn 4px) gi\u1eefa c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt l\u1ed3ng gh\u00e9p s\u1ebd t\u1ea1o kho\u1ea3ng c\u00e1ch r\u00f5 r\u00e0ng gi\u1eefa c\u00e1c danh m\u1ee5c cha v\u00e0 c\u00e1c m\u1ee5c con.<\/li>\n
  • B\u1eadt breadcrumb cho c\u00e1c c\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p s\u00e2u:<\/strong> Khi hi\u1ec3n th\u1ecb 3 c\u1ea5p ho\u1eb7c nhi\u1ec1u h\u01a1n, h\u00e3y b\u1eadt `breadcrumb: { show: true }` \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng theo d\u00f5i v\u1ecb tr\u00ed hi\u1ec7n t\u1ea1i v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng quay l\u1ea1i c\u1ea5p cao h\u01a1n.<\/li>\n
  • Gi\u1eef nh\u00e3n ng\u1eafn g\u1ecdn:<\/strong> V\u0103n b\u1ea3n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng tr\u00e0n ra ngo\u00e0i c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt l\u00e1 nh\u1ecf. K\u1ebft h\u1ee3p t\u00ean ng\u1eafn g\u1ecdn v\u1edbi c\u00f4ng c\u1ee5 g\u1ee3i \u00fd ho\u1eb7c s\u1eed d\u1ee5ng leafDepth<\/code> \u0111\u1ec3 \u1ea9n c\u00e1c h\u00ecnh ch\u1eef nh\u1eadt con nh\u1ecf cho \u0111\u1ebfn khi ph\u00f3ng to.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi tr\u00ecnh b\u00e0y c\u00e1c t\u1eadp d\u1eef li\u1ec7u ph\u00e2n c\u1ea5p nhi\u1ec1u c\u1ea5p \u0111\u1ed9 ho\u1eb7c hi\u1ec3n th\u1ecb c\u00e1c ph\u00e2n t\u00edch tr\u1ef1c quan l\u1edbn n\u01a1i kh\u00f4ng gian l\u00e0 y\u1ebfu t\u1ed1 qu\u00fd gi\u00e1, th\u00ecBi\u1ec3u \u0111\u1ed3 Treemap cung c\u1ea5p m\u1ed9t gi\u1ea3i ph\u00e1p tr\u1ef1c quan hi\u1ec7u…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":17,"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-2053","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Treemap Chart Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram 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\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-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_6a66c1310caac.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=\"2 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\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/\",\"name\":\"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1310caac.png\",\"datePublished\":\"2026-07-27T02:21:52+00:00\",\"description\":\"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1310caac.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1310caac.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/treemap-chart-hierarchical-volumes-and-nested-proportions-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 Treemap: Th\u1ec3 t\u00edch ph\u00e2n c\u1ea5p v\u00e0 t\u1ef7 l\u1ec7 l\u1ed3ng gh\u00e9p\"}]},{\"@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 Treemap Chart Guide | VPasCode Text to Diagram Guide","description":"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram 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\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide","og_description":"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/","name":"ECharts Treemap Chart Guide | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png","datePublished":"2026-07-27T02:21:52+00:00","description":"Display proportional nested rectangle grids using ECharts treemaps in VPasCode, your free text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1310caac.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/treemap-chart-hierarchical-volumes-and-nested-proportions-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 Treemap: Th\u1ec3 t\u00edch ph\u00e2n c\u1ea5p v\u00e0 t\u1ef7 l\u1ec7 l\u1ed3ng gh\u00e9p"}]},{"@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\/2053","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=2053"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}