{"id":2045,"date":"2026-07-27T03:20:18","date_gmt":"2026-07-27T03:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/tree-chart-hierarchical-data-and-structural-relationships-guide\/"},"modified":"2026-07-27T03:20:18","modified_gmt":"2026-07-27T03:20:18","slug":"tree-chart-hierarchical-data-and-structural-relationships-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 C\u00e2y: D\u1eef li\u1ec7u ph\u00e2n c\u1ea5p v\u00e0 c\u00e1c m\u1ed1i quan h\u1ec7 c\u1ea5u tr\u00fac"},"content":{"rendered":"

Khi tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u c\u00f3 c\u1ea5u tr\u00fac v\u1edbi c\u00e1c m\u1ed1i quan h\u1ec7 cha-con r\u00f5 r\u00e0ng\u2014v\u00ed d\u1ee5 nh\u01b0 s\u01a1 \u0111\u1ed3 t\u1ed5 ch\u1ee9c, th\u01b0 m\u1ee5c h\u1ec7 th\u1ed1ng t\u1ec7p, c\u00e2y quy\u1ebft \u0111\u1ecbnh ho\u1eb7c ph\u00e2n lo\u1ea1i ph\u00e2n lo\u1ea1i h\u1ecdc\u2014th\u00ecBi\u1ec3u \u0111\u1ed3 C\u00e2y<\/strong> cung c\u1ea5p m\u1ed9t khung h\u00ecnh \u1ea3nh tr\u1ef1c quan. B\u1eb1ng c\u00e1ch s\u1eafp x\u1ebfp c\u00e1c n\u00fat d\u1eef li\u1ec7u d\u1ecdc theo c\u00e1c nh\u00e1nh ph\u00e2n nh\u00e1nh, bi\u1ec3u \u0111\u1ed3 c\u00e2y cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng kh\u00e1m ph\u00e1 c\u00e1c c\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p l\u1ed3ng nhau v\u00e0 theo d\u00f5i c\u00e1c k\u1ebft n\u1ed1i t\u1eeb m\u1ed9t n\u00fat g\u1ed1c trung t\u00e2m xu\u1ed1ng c\u00e1c nh\u00e1nh con.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a Bi\u1ec3u \u0111\u1ed3 C\u00e2y<\/h2>\n

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 c\u00e2y s\u1eed d\u1ee5ngtype: 'tree'<\/code>. Kh\u00e1c v\u1edbi c\u00e1c bi\u1ec3u \u0111\u1ed3 ti\u00eau chu\u1ea9n c\u00f3 tr\u1ee5c X v\u00e0 Y r\u00f5 r\u00e0ng, bi\u1ec3u \u0111\u1ed3 c\u00e2y x\u00e2y d\u1ef1ng v\u1ecb tr\u00ed b\u1ed1 c\u1ee5c t\u1ef1 \u0111\u1ed9ng t\u1eeb m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng JavaScript l\u1ed3ng gh\u00e9p ch\u1ee9a m\u1ed9tname<\/code> v\u00e0 m\u1ed9t m\u1ea3ng t\u00f9y ch\u1ecdnchildren<\/code> m\u1ea3ng.<\/p>\n

1. Thi\u1ebft l\u1eadp c\u01a1 b\u1ea3n<\/h3>\n

\u0110\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t bi\u1ec3u \u0111\u1ed3 c\u00e2y c\u01a1 b\u1ea3n, h\u00e3y x\u00e1c \u0111\u1ecbnh c\u1ea5u tr\u00fac d\u1eef li\u1ec7u l\u1ed3ng gh\u00e9p c\u1ee7a b\u1ea1n v\u00e0 \u0111\u1eb7ttype: 'tree'<\/code>b\u00ean trong m\u1ea3ng series:<\/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        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'tree',\r\n            data: [{\r\n                name: 'Gi\u00e1m \u0111\u1ed1c \u0111i\u1ec1u h\u00e0nh',\r\n                children: [\r\n                    {\r\n                        name: 'Gi\u00e1m \u0111\u1ed1c s\u1ea3n ph\u1ea9m',\r\n                        children: [\r\n                            { name: 'Qu\u1ea3n l\u00fd s\u1ea3n ph\u1ea9m' },\r\n                            { name: 'Thi\u1ebft k\u1ebf UX' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Gi\u00e1m \u0111\u1ed1c k\u1ef9 thu\u1eadt',\r\n                        children: [\r\n                            { name: 'Tr\u01b0\u1edfng nh\u00f3m c\u00f4ng ngh\u1ec7' },\r\n                            { name: 'K\u1ef9 s\u01b0 DevOps' }\r\n                        ]\r\n                    }\r\n                ]\r\n            }],\r\n            top: '5%',\r\n            left: '15%',\r\n            bottom: '5%',\r\n            right: '20%',\r\n            symbolSize: 10,\r\n            label: {\r\n                position: 'left',\r\n                verticalAlign: 'middle',\r\n                align: 'right',\r\n                fontSize: 12\r\n            },\r\n            leaves: {\r\n                label: {\r\n                    position: 'right',\r\n                    verticalAlign: 'middle',\r\n                    align: 'left'\r\n                }\r\n            },\r\n            expandAndCollapse: true,\r\n            animationDurationUpdate: 750\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 \u0111\u1ecbnh h\u01b0\u1edbng b\u1ed1 c\u1ee5c n\u00e2ng cao<\/h2>\n
Bi\u1ec3u \u0111\u1ed3 c\u00e2y c\u00f3 th\u1ec3 th\u00edch nghi v\u1edbi c\u00e1c gi\u1edbi h\u1ea1n kh\u00f4ng gian kh\u00e1c nhau v\u00e0 y\u00eau c\u1ea7u thi\u1ebft k\u1ebf b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i h\u01b0\u1edbng b\u1ed1 c\u1ee5c ho\u1eb7c chuy\u1ec3n sang hi\u1ec3n th\u1ecb h\u00ecnh tr\u00f2n.<\/p>\n
1. B\u1ed1 c\u1ee5c c\u00e2y h\u00ecnh tr\u00f2n<\/h3>\n
\u0110\u1eb7tlayout: 'radial'<\/code>\u0111\u1ec3 chi\u1ebfu c\u00e1c nh\u00e1nh ra ngo\u00e0i t\u1eeb m\u1ed9t \u0111i\u1ec3m trung t\u00e2m, l\u00fd t\u01b0\u1edfng cho c\u00e1c c\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p r\u1ed9ng v\u1edbi nhi\u1ec1u n\u00fat l\u00e1:<\/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        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'tree',\r\n            layout: 'radial',\r\n            data: [{\r\n                name: 'G\u1ed1c',\r\n                children: [\r\n                    {\r\n                        name: 'Nh\u00e1nh A',\r\n                        children: [\r\n                            { name: 'A1' },\r\n                            { name: 'A2' },\r\n                            { name: 'A3' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Nh\u00e1nh B',\r\n                        children: [\r\n                            { name: 'B1' },\r\n                            { name: 'B2' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Nh\u00e1nh C',\r\n                        children: [\r\n                            { name: 'C1' },\r\n                            { name: 'C2' },\r\n                            { name: 'C3' },\r\n                            { name: 'C4' }\r\n                        ]\r\n                    }\r\n                ]\r\n            }],\r\n            top: '18%',\r\n            bottom: '14%',\r\n            right: '18%',\r\n            left: '18%',\r\n            symbolSize: 12,\r\n            initialTreeDepth: 2,\r\n            animationDurationUpdate: 750\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
T\u00f9y ch\u1ec9nh bi\u1ec3u t\u01b0\u1ee3ng n\u00fat, \u0111\u01b0\u1eddng cong \u0111\u01b0\u1eddng n\u1ed1i v\u00e0 \u0111\u1ecbnh d\u1ea1ng theo c\u1ea5p \u0111\u1ed9 gi\u00fap l\u00e0m n\u1ed5i b\u1eadt c\u00e1c t\u1ea7ng c\u1ea5u tr\u00fac ch\u00ednh trong c\u00e1c s\u01a1 \u0111\u1ed3 l\u1edbn.<\/p>\n
1. K\u1ebft n\u1ed1i cong v\u00e0 \u0111\u1ecbnh d\u1ea1ng n\u00fat theo c\u1ea5p \u0111\u1ed9<\/h3>\n
S\u1eed d\u1ee5ng lineStyle.curveness<\/code> \u0111\u1ec3 l\u00e0m tr\u01a1n c\u00e1c \u0111\u01b0\u1eddng n\u1ed1i, v\u00e0 x\u00e1c \u0111\u1ecbnh levels<\/code>c\u1ea5u h\u00ecnh m\u1ea3ng \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng c\u00e1c n\u00fat theo \u0111\u1ed9 s\u00e2u c\u1ee7a ch\u00fang trong c\u1ea5u tr\u00fac ph\u00e2n c\u1ea5p:<\/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    series: [\r\n        {\r\n            type: 'tree',\r\n            orient: 'TB', \/\/ H\u01b0\u1edbng t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi\r\n            data: [{\r\n                name: 'G\u1ed1c D\u1ef1 \u00e1n',\r\n                children: [\r\n                    {\r\n                        name: 'Frontend',\r\n                        children: [\r\n                            { name: 'React' },\r\n                            { name: 'Vue' }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: 'Backend',\r\n                        children: [\r\n                            { name: 'Node.js' },\r\n                            { name: 'Python' }\r\n                        ]\r\n                    }\r\n                ]\r\n            }],\r\n            top: '10%',\r\n            left: '10%',\r\n            bottom: '10%',\r\n            right: '10%',\r\n            symbol: 'emptyCircle',\r\n            symbolSize: 14,\r\n            edgeShape: 'polyline', \/\/ S\u1eed d\u1ee5ng k\u1ebft n\u1ed1i h\u00ecnh ch\u1eef nh\u1eadt s\u1eafc n\u00e9t thay v\u00ec \u0111\u01b0\u1eddng cong\r\n            initialTreeDepth: 2,\r\n            lineStyle: {\r\n                width: 2,\r\n                color: '#ccc'\r\n            },\r\n            label: {\r\n                position: 'top',\r\n                fontSize: 12\r\n            },\r\n            leaves: {\r\n                label: {\r\n                    position: 'bottom'\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
  • Ki\u1ec3m so\u00e1t \u0111\u1ed9 s\u00e2u thu g\u1ecdn ban \u0111\u1ea7u:<\/strong> \u0110\u1eb7t initialTreeDepth<\/code> (v\u00ed d\u1ee5: 1<\/code> ho\u1eb7c 2<\/code>) tr\u00ean d\u1eef li\u1ec7u l\u1edbn \u0111\u1ec3 gi\u1eef cho bi\u1ec3u \u0111\u1ed3 s\u1ea1ch s\u1ebd khi t\u1ea3i ban \u0111\u1ea7u, \u0111\u1ed3ng th\u1eddi cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng nh\u1ea5p v\u00e0o c\u00e1c n\u00fat \u0111\u1ec3 m\u1edf r\u1ed9ng chi ti\u1ebft.<\/li>\n
  • Ch\u1ecdn \u0111\u1ecbnh h\u01b0\u1edbng ph\u00f9 h\u1ee3p:<\/strong>S\u1eed d\u1ee5ng b\u1ed1 c\u1ee5c ngang (`LR`) ho\u1eb7c b\u1ed1 c\u1ee5c h\u00ecnh tr\u00f2n (`radial`) cho c\u00e1c c\u1ea5u tr\u00fac l\u1ed3ng gh\u00e9p s\u00e2u v\u1edbi v\u0103n b\u1ea3n nh\u00e3n d\u00e0i, v\u00e0 b\u1ed1 c\u1ee5c d\u1ecdc (`TB`) cho c\u00e1c c\u1ea5u tr\u00fac t\u1ed5 ch\u1ee9c n\u00f4ng, r\u1ed9ng.<\/li>\n
  • Ph\u00e2n bi\u1ec7t c\u00e1c n\u00fat l\u00e1:<\/strong> S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh leaves<\/code>\u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng c\u00e1c n\u00fat cu\u1ed1i kh\u00e1c bi\u1ec7t v\u1edbi c\u00e1c n\u00fat cha ch\u1ee9a, gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng ph\u00e2n bi\u1ec7t nh\u00e1nh v\u1edbi \u0111i\u1ec3m k\u1ebft th\u00fac.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u c\u00f3 c\u1ea5u tr\u00fac v\u1edbi c\u00e1c m\u1ed1i quan h\u1ec7 cha-con r\u00f5 r\u00e0ng\u2014v\u00ed d\u1ee5 nh\u01b0 s\u01a1 \u0111\u1ed3 t\u1ed5 ch\u1ee9c, th\u01b0 m\u1ee5c h\u1ec7 th\u1ed1ng t\u1ec7p, c\u00e2y quy\u1ebft \u0111\u1ecbnh ho\u1eb7c ph\u00e2n lo\u1ea1i ph\u00e2n lo\u1ea1i h\u1ecdc\u2014th\u00ecBi\u1ec3u \u0111\u1ed3 C\u00e2y cung c\u1ea5p…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":25,"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-2045","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Tree Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free 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\/tree-chart-hierarchical-data-and-structural-relationships-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-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_6a66cea84c9c2.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\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\",\"name\":\"ECharts Tree 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\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\",\"datePublished\":\"2026-07-27T03:20:18+00:00\",\"description\":\"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cea84c9c2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/tree-chart-hierarchical-data-and-structural-relationships-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 C\u00e2y: D\u1eef li\u1ec7u ph\u00e2n c\u1ea5p v\u00e0 c\u00e1c m\u1ed1i quan h\u1ec7 c\u1ea5u tr\u00fac\"}]},{\"@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 Tree Chart Guide | VPasCode Text to Diagram Tool","description":"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free 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\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Tree Chart Guide | VPasCode Text to Diagram Tool","og_description":"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.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\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/","name":"ECharts Tree 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\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.png","datePublished":"2026-07-27T03:20:18+00:00","description":"Script branching node tree diagrams from JSON data using ECharts in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cea84c9c2.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/tree-chart-hierarchical-data-and-structural-relationships-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 C\u00e2y: D\u1eef li\u1ec7u ph\u00e2n c\u1ea5p v\u00e0 c\u00e1c m\u1ed1i quan h\u1ec7 c\u1ea5u tr\u00fac"}]},{"@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\/2045","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=2045"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}