{"id":2052,"date":"2026-07-27T02:26:23","date_gmt":"2026-07-27T02:26:23","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/"},"modified":"2026-07-27T02:26:23","modified_gmt":"2026-07-27T02:26:23","slug":"sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 Sunburst: Th\u1ee9 t\u1ef1 ph\u00e2n c\u1ea5p h\u00ecnh tr\u00f2n v\u00e0 c\u00e1c ph\u00e2n \u0111o\u1ea1n v\u00f2ng nhi\u1ec1u c\u1ea5p"},"content":{"rendered":"

Khi tr\u00ecnh b\u00e0y c\u00e1c th\u1ee9 t\u1ef1 ph\u00e2n c\u1ea5p nhi\u1ec1u c\u1ea5p, n\u01a1i c\u00e1c v\u00f2ng b\u00ean trong \u0111\u1ea1i di\u1ec7n cho c\u00e1c danh m\u1ee5c c\u1ea5p cao v\u00e0 c\u00e1c v\u00f2ng b\u00ean ngo\u00e0i chia nh\u1ecf c\u00e1c danh m\u1ee5c con, th\u00ecBi\u1ec3u \u0111\u1ed3 Sunburst<\/strong> mang l\u1ea1i m\u1ed9t l\u1ef1a ch\u1ecdn h\u00ecnh tr\u00f2n s\u1ea1ch s\u1ebd thay th\u1ebf cho bi\u1ec3u \u0111\u1ed3 treemap. B\u1eb1ng c\u00e1ch s\u1eafp x\u1ebfp c\u00e1c danh m\u1ee5c l\u1ed3ng gh\u00e9p v\u00e0o c\u00e1c v\u00f2ng \u0111\u1ed3ng t\u00e2m, bi\u1ec3u \u0111\u1ed3 Sunburst cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng kh\u00e1m ph\u00e1c\u00e1c t\u1ef7 l\u1ec7 c\u1ea5u tr\u00fac nhi\u1ec1u c\u1ea5p, c\u00e1c m\u1ed1i quan h\u1ec7 cha-con v\u00e0 c\u00e1c h\u00e0nh tr\u00ecnh ph\u00e2n ph\u1ed1i<\/em>trong m\u1ed9t kh\u00f4ng gian g\u1ecdn g\u00e0ng\u2014v\u00ed d\u1ee5 nh\u01b0 c\u00e1c danh m\u1ee5c s\u1ea3n ph\u1ea9m to\u00e0n c\u1ea7u, s\u01a1 \u0111\u1ed3 t\u1ed5 ch\u1ee9c ho\u1eb7c c\u00e1c h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng b\u1ecb m\u1ea5t \u1edf nhi\u1ec1u b\u01b0\u1edbc.<\/p>\n

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

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 Sunburst s\u1eed d\u1ee5ngtype: 'sunburst'<\/code>. T\u01b0\u01a1ng t\u1ef1 nh\u01b0 bi\u1ec3u \u0111\u1ed3 treemap, chu\u1ed7i d\u1eef li\u1ec7u mong \u0111\u1ee3i m\u1ed9t c\u1ea5u tr\u00fac c\u00e2y l\u1ed3ng gh\u00e9p trong m\u1ea3ngdata<\/code> n\u01a1i c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng cha ch\u1ee9achildren<\/code>m\u1ea3ng. B\u1ed9 x\u1eed l\u00fd s\u1ebd hi\u1ec3n th\u1ecb n\u00fat g\u1ed1c ho\u1eb7c c\u00e1c danh m\u1ee5c c\u1ea5p cao nh\u1ea5t trong v\u00f2ng tr\u00f2n \u1edf b\u00ean trong nh\u1ea5t v\u00e0 m\u1edf r\u1ed9ng c\u00e1c danh m\u1ee5c con ra ngo\u00e0i qua c\u00e1c l\u1edbp v\u00f2ng \u0111\u1ed3ng t\u00e2m.<\/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 Sunburst c\u01a1 b\u1ea3n, cung c\u1ea5p m\u1ed9t b\u1ed9 d\u1eef li\u1ec7u c\u00e2y l\u1ed3ng gh\u00e9p v\u00e0 \u0111\u1eb7ttype: 'sunburst'<\/code>b\u00ean trong \u0111\u1ed1i t\u01b0\u1ee3ng 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        trigger: 'item',\r\n        formatter: '{b}: {c}'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sunburst',\r\n            data: [\r\n                {\r\n                    name: '\u00d4ng t\u1ed5',\r\n                    children: [\r\n                        {\r\n                            name: 'Cha 1',\r\n                            value: 15,\r\n                            children: [\r\n                                { name: 'Con 1', value: 5 },\r\n                                { name: 'Con 2', value: 10 }\r\n                            ]\r\n                        },\r\n                        {\r\n                            name: 'Cha 2',\r\n                            value: 10,\r\n                            children: [\r\n                                { name: 'Con 3', value: 10 }\r\n                            ]\r\n                        }\r\n                    ]\r\n                }\r\n            ],\r\n            radius: [0, '90%'],\r\n            label: {\r\n                rotate: 'radial'\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 Sunburst c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u00f9y ch\u1ec9nh v\u1edbi c\u00e1c quy t\u1eafc \u0111\u1ecbnh d\u1ea1ng theo l\u1edbp v\u00f2ng, k\u1ebf th\u1eeba m\u00e0u s\u1eafc v\u00e0 c\u00e1c thao t\u00e1c \u0111i\u1ec1u h\u01b0\u1edbng t\u01b0\u01a1ng t\u00e1c b\u1eb1ng c\u00e1ch nh\u1ea5p \u0111\u1ec3 ph\u00f3ng to.<\/p>\n
1. T\u00f9y ch\u1ec9nh v\u00f2ng theo c\u1ea5p \u0111\u1ed9 v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng chi ti\u1ebft<\/h3>\n
S\u1eed d\u1ee5nglevels<\/code>m\u1ea3ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1c b\u00e1n k\u00ednh ri\u00eang bi\u1ec7t, h\u00e0nh vi nh\u00e3n v\u00e0 ki\u1ec3u d\u00e1ng m\u1ee5c cho t\u1eebng l\u1edbp v\u00f2ng \u0111\u1ed3ng t\u00e2m t\u1eeb t\u00e2m ra ngo\u00e0i:<\/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    },\r\n    legend: {\r\n        top: '2%',\r\n        left: 'center',\r\n        data: ['\u0110i\u1ec7n t\u1eed', 'Nh\u00e0 c\u1eeda & Cu\u1ed9c s\u1ed1ng']\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sunburst',\r\n            center: ['50%', '55%'],\r\n            radius: ['10%', '85%'],\r\n            nodeClick: 'rootToNode', \/\/ K\u00edch ho\u1ea1t thao t\u00e1c thu nh\u1ecf khi nh\u1ea5p v\u00e0o n\u00fat\r\n            levels: [\r\n                {},\r\n                {\r\n                    \/\/ V\u00f2ng trong (Danh m\u1ee5c c\u1ea5p cao)\r\n                    r0: '15%',\r\n                    r: '40%',\r\n                    label: { rotate: 0, fontWeight: 'bold' },\r\n                    itemStyle: { borderWidth: 2 }\r\n                },\r\n                {\r\n                    \/\/ V\u00f2ng gi\u1eefa (Danh m\u1ee5c con)\r\n                    r0: '40%',\r\n                    r: '65%',\r\n                    label: { rotate: 'tangential', fontSize: 11 }\r\n                },\r\n                {\r\n                    \/\/ V\u00f2ng ngo\u00e0i (S\u1ea3n ph\u1ea9m l\u00e1)\r\n                    r0: '65%',\r\n                    r: '85%',\r\n                    label: { rotate: 'radial', fontSize: 10 }\r\n                }\r\n            ],\r\n            data: [\r\n                {\r\n                    name: '\u0110i\u1ec7n t\u1eed',\r\n                    children: [\r\n                        {\r\n                            name: '\u00c2m than',\r\n                            children: [\r\n                                { name: 'Tai nghe', value: 40 },\r\n                                { name: 'Loa', value: 25 }\r\n                            ]\r\n                        },\r\n                        {\r\n                            name: 'M\u00e1y t\u00ednh',\r\n                            children: [\r\n                                { name: 'Laptop', value: 80 },\r\n                                { name: 'M\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n', value: 35 }\r\n                            ]\r\n                        }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Nh\u00e0 c\u1eeda & Cu\u1ed9c s\u1ed1ng',\r\n                    children: [\r\n                        {\r\n                            name: 'N\u1ed9i th\u1ea5t',\r\n                            children: [\r\n                                { name: 'Gh\u1ebf', value: 50 },\r\n                                { name: 'B\u00e0n', value: 30 }\r\n                            ]\r\n                        },\r\n                        {\r\n                            name: 'Trang tr\u00ed',\r\n                            children: [\r\n                                { name: '\u0110\u00e8n chi\u1ebfu s\u00e1ng', value: 45 },\r\n                                { name: 'Th\u1ea3m tr\u1ea3i s\u00e0n', value: 20 }\r\n                            ]\r\n                        }\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 c\u0103n ch\u1ec9nh nh\u00e3n<\/h2>\n
\u0110i\u1ec1u khi\u1ec3n ch\u1ebf \u0111\u1ed9 xoay nh\u00e3n (b\u00e1n k\u00ednh<\/code> so v\u1edbi ti\u1ebfp tuy\u1ebfn<\/code>) gi\u00fap v\u0103n b\u1ea3n d\u1ec5 \u0111\u1ecdc khi c\u00e1c \u0111o\u1ea1n nh\u1ecf l\u1ea1i h\u01b0\u1edbng v\u1ec1 c\u00e1c v\u00f2ng ngo\u00e0i.<\/p>\n
1. Kho\u1ea3ng c\u00e1ch ph\u00e2n t\u00e1ch \u0111o\u1ea1n t\u00f9y ch\u1ec9nh v\u00e0 nh\u00e3n theo b\u00e1n k\u00ednh<\/h3>\n
\u00c1p d\u1ee5ng vi\u1ec1n cho m\u1ee5c v\u00e0 \u0111\u1eb7t rotate: 'radial'<\/code>\u0111\u1ec3 c\u0103n ch\u1ec9nh v\u0103n b\u1ea3n d\u1ecdc theo c\u00e1c b\u00e1n k\u00ednh \u0111o\u1ea1n m\u1ed9t c\u00e1ch g\u1ecdn g\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    series: [\r\n        {\r\n            type: 'sunburst',\r\n            radius: ['20%', '90%'],\r\n            itemStyle: {\r\n                borderRadius: 4,\r\n                borderColor: '#ffffff',\r\n                borderWidth: 2\r\n            },\r\n            label: {\r\n                show: true,\r\n                rotate: 'radial',\r\n                align: 'right'\r\n            },\r\n            data: [\r\n                {\r\n                    name: 'Ph\u1ea7n m\u1ec1m',\r\n                    itemStyle: { color: '#5470c6' },\r\n                    children: [\r\n                        { name: 'SaaS', value: 120 },\r\n                        { name: 'Tr\u00ean c\u01a1 s\u1edf', value: 60 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'Ph\u1ea7n c\u1ee9ng',\r\n                    itemStyle: { color: '#91cc75' },\r\n                    children: [\r\n                        { name: 'M\u00e1y ch\u1ee7', value: 90 },\r\n                        { name: 'M\u1ea1ng', value: 110 }\r\n                    ]\r\n                },\r\n                {\r\n                    name: 'D\u1ecbch v\u1ee5',\r\n                    itemStyle: { color: '#fac858' },\r\n                    children: [\r\n                        { name: 'T\u01b0 v\u1ea5n', value: 70 },\r\n                        { name: 'H\u1ed7 tr\u1ee3', value: 50 }\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 th\u1ef1c h\u00e0nh t\u1ed1t chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • Ph\u00f9 h\u1ee3p \u0111\u1ed9 xoay nh\u00e3n v\u1edbi \u0111\u1ed9 s\u00e2u c\u1ee7a v\u00f2ng tr\u00f2n:<\/strong> S\u1eed d\u1ee5ng ngang (rotate: 0<\/code>) ho\u1eb7c nh\u00e3n ti\u1ebfp tuy\u1ebfn cho c\u00e1c v\u00f2ng trong r\u1ed9ng, v\u00e0 chuy\u1ec3n sang b\u00e1n k\u00ednh<\/code>nh\u00e3n cho c\u00e1c \u0111o\u1ea1n ngo\u00e0i h\u1eb9p.<\/li>\n
  • K\u00edch ho\u1ea1t nodeClick: 'rootToNode'<\/code>:<\/strong>Ch\u1ebf \u0111\u1ed9 thu ph\u00f3ng t\u01b0\u01a1ng t\u00e1c cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng nh\u1ea5p v\u00e0o b\u1ea5t k\u1ef3 cung cha n\u00e0o \u0111\u1ec3 t\u1eadp trung tr\u1ef1c ti\u1ebfp v\u00e0o c\u00e2y con c\u1ee7a n\u00f3 m\u00e0 kh\u00f4ng g\u00e2y r\u1ed1i m\u1eaft.<\/li>\n
  • S\u1eed d\u1ee5ng k\u1ebf th\u1eeba m\u00e0u s\u1eafc:<\/strong>Cho ph\u00e9p c\u00e1c \u0111o\u1ea1n con k\u1ebf th\u1eeba s\u1eafc \u0111\u1ed9 c\u01a1 b\u1ea3n t\u1eeb n\u00fat cha c\u1ee7a ch\u00fang v\u1edbi \u0111\u1ed9 s\u00e1ng\/\u0111\u1ed9 b\u00e3o h\u00f2a thay \u0111\u1ed5i \u0111\u1ec3 duy tr\u00ec s\u1ef1 nh\u00f3m h\u00ecnh \u1ea3nh r\u00f5 r\u00e0ng qua c\u00e1c c\u1ea5p \u0111\u1ed9.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi tr\u00ecnh b\u00e0y c\u00e1c th\u1ee9 t\u1ef1 ph\u00e2n c\u1ea5p nhi\u1ec1u c\u1ea5p, n\u01a1i c\u00e1c v\u00f2ng b\u00ean trong \u0111\u1ea1i di\u1ec7n cho c\u00e1c danh m\u1ee5c c\u1ea5p cao v\u00e0 c\u00e1c v\u00f2ng b\u00ean ngo\u00e0i chia nh\u1ecf c\u00e1c danh m\u1ee5c con, th\u00ecBi\u1ec3u \u0111\u1ed3 Sunburst mang l\u1ea1i m\u1ed9t…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":18,"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-2052","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Sunburst Chart Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile 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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Sunburst Chart Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-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_6a66c1f6396fc.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\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/\",\"name\":\"ECharts Sunburst 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\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1f6396fc.png\",\"datePublished\":\"2026-07-27T02:26:23+00:00\",\"description\":\"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1f6396fc.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c1f6396fc.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-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 Sunburst: Th\u1ee9 t\u1ef1 ph\u00e2n c\u1ea5p h\u00ecnh tr\u00f2n v\u00e0 c\u00e1c ph\u00e2n \u0111o\u1ea1n v\u00f2ng nhi\u1ec1u c\u1ea5p\"}]},{\"@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 Sunburst Chart Guide | VPasCode Text to Diagram Guide","description":"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile 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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Sunburst Chart Guide | VPasCode Text to Diagram Guide","og_description":"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/","name":"ECharts Sunburst 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\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.png","datePublished":"2026-07-27T02:26:23+00:00","description":"Render radial multi-level tree data with ECharts sunburst charts in VPasCode, a versatile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c1f6396fc.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sunburst-chart-radial-hierarchy-and-multi-level-ring-breaks-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 Sunburst: Th\u1ee9 t\u1ef1 ph\u00e2n c\u1ea5p h\u00ecnh tr\u00f2n v\u00e0 c\u00e1c ph\u00e2n \u0111o\u1ea1n v\u00f2ng nhi\u1ec1u c\u1ea5p"}]},{"@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\/2052","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=2052"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}