{"id":2054,"date":"2026-07-27T02:17:47","date_gmt":"2026-07-27T02:17:47","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/graph-chart-network-topology-and-relationship-mapping-guide\/"},"modified":"2026-07-27T02:17:47","modified_gmt":"2026-07-27T02:17:47","slug":"graph-chart-network-topology-and-relationship-mapping-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3 th\u1ecb: B\u1ea3n \u0111\u1ed3 ki\u1ebfn tr\u00fac m\u1ea1ng v\u00e0 b\u1ea3n \u0111\u1ed3 m\u1ed1i quan h\u1ec7"},"content":{"rendered":"

Khi l\u1eadp b\u1ea3n \u0111\u1ed3 c\u00e1c m\u1ea1ng l\u01b0\u1edbi li\u00ean k\u1ebft, c\u00e1c ph\u00e2n c\u1ea5p c\u1ea5u tr\u00fac ho\u1eb7c c\u00e1c m\u1ed1i quan h\u1ec7 th\u1ef1c th\u1ec3 ph\u1ee9c t\u1ea1p, th\u00ecBi\u1ec3u \u0111\u1ed3 \u0111\u1ed3 th\u1ecb<\/strong> (ho\u1eb7c bi\u1ec3u \u0111\u1ed3 m\u1ea1ng l\u01b0\u1edbi) l\u00e0 khung h\u00ecnh \u1ea3nh l\u00fd t\u01b0\u1edfng. B\u1eb1ng c\u00e1ch hi\u1ec3n th\u1ecb c\u00e1c m\u1ee5c d\u01b0\u1edbi d\u1ea1ng n\u00fat v\u00e0 c\u00e1c k\u1ebft n\u1ed1i d\u01b0\u1edbi d\u1ea1ng li\u00ean k\u1ebft c\u00f3 h\u01b0\u1edbng ho\u1eb7c v\u00f4 h\u01b0\u1edbng, bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3 th\u1ecb cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng kh\u00e1m ph\u00e1c\u00e1c c\u1ee5m, c\u00e2y ph\u1ee5 thu\u1ed9c v\u00e0 lu\u1ed3ng quan h\u1ec7<\/em>m\u00e0 c\u00e1c bi\u1ec3u \u0111\u1ed3 b\u1ea3ng chu\u1ea9n kh\u00f4ng th\u1ec3 truy\u1ec1n \u0111\u1ea1t\u2014v\u00ed d\u1ee5 nh\u01b0 ki\u1ebfn tr\u00fac d\u1ecbch v\u1ee5 vi m\u00f4, t\u01b0\u01a1ng t\u00e1c m\u1ea1ng x\u00e3 h\u1ed9i ho\u1eb7c \u0111\u1ed3 th\u1ecb tri th\u1ee9c.<\/p>\n

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

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3 th\u1ecb s\u1eed d\u1ee5ngtype: 'graph'<\/code>. Thay v\u00ec \u00e1nh x\u1ea1 c\u00e1c gi\u00e1 tr\u1ecb s\u1ed1 tr\u1ef1c ti\u1ebfp sang t\u1ecda \u0111\u1ed9 tr\u1ee5c ngang v\u00e0 tr\u1ee5c d\u1ecdc, bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3 th\u1ecb s\u1eed d\u1ee5ng m\u1ed9t b\u1ed9 s\u01b0u t\u1eadp r\u00f5 r\u00e0ng c\u1ee7an\u00fat<\/code> (ho\u1eb7cdata<\/code>) v\u00e0links<\/code> (ho\u1eb7cc\u1ea1nh<\/code>). Sau \u0111\u00f3 ECharts s\u1eafp x\u1ebfp c\u00e1c n\u00fat n\u00e0y b\u1eb1ng c\u00e1ch \u0111\u1eb7t t\u1ecda \u0111\u1ed9 c\u1ed1 \u0111\u1ecbnh, b\u1ed1 c\u1ee5c h\u00ecnh tr\u00f2n ho\u1eb7c b\u1eb1ng m\u1ed9t b\u1ed9 \u0111\u1ed9ng l\u1ef1c h\u1ecdc l\u1ef1c h\u01b0\u1edbng \u0111\u1ed9ng \u0111\u1ed9ng.<\/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 m\u1ea1ng c\u01a1 b\u1ea3n b\u1eb1ng v\u1eadt l\u00fd h\u01b0\u1edbng l\u1ef1c, khai b\u00e1o c\u00e1c n\u00fat c\u1ee7a b\u1ea1n b\u00ean trongdata<\/code>, \u00e1nh x\u1ea1 c\u00e1c k\u1ebft n\u1ed1i b\u00ean tronglinks<\/code>, v\u00e0 \u0111\u1eb7tlayout: 'force'<\/code>:<\/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    legend: {\r\n        data: ['D\u1ecbch v\u1ee5', 'C\u01a1 s\u1edf d\u1eef li\u1ec7u']\r\n    },\r\n    series: [\r\n        {\r\n            name: 'M\u1ea1ng l\u01b0\u1edbi H\u1ec7 th\u1ed1ng',\r\n            type: 'graph',\r\n            layout: 'force',\r\n            roam: true, \/\/ Cho ph\u00e9p thu ph\u00f3ng v\u00e0 di chuy\u1ec3n\r\n            label: {\r\n                show: true,\r\n                position: 'right'\r\n            },\r\n            force: {\r\n                repulsion: 100,\r\n                edgeLength: 80\r\n            },\r\n            data: [\r\n                { id: '0', name: 'C\u1ed5ng API', symbolSize: 30, category: 0 },\r\n                { id: '1', name: 'D\u1ecbch v\u1ee5 X\u00e1c th\u1ef1c', symbolSize: 20, category: 0 },\r\n                { id: '2', name: 'D\u1ecbch v\u1ee5 \u0110\u01a1n h\u00e0ng', symbolSize: 20, category: 0 },\r\n                { id: '3', name: 'CSDL Ng\u01b0\u1eddi d\u00f9ng', symbolSize: 25, category: 1 },\r\n                { id: '4', name: 'CSDL \u0110\u01a1n h\u00e0ng', symbolSize: 25, category: 1 }\r\n            ],\r\n            links: [\r\n                { source: '0', target: '1' },\r\n                { source: '0', target: '2' },\r\n                { source: '1', target: '3' },\r\n                { source: '2', target: '4' }\r\n            ],\r\n            categories: [\r\n                { name: 'D\u1ecbch v\u1ee5' },\r\n                { name: 'C\u01a1 s\u1edf d\u1eef li\u1ec7u' }\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 \u0111\u1ed3 th\u1ecb h\u1ed7 tr\u1ee3 c\u00e1c b\u1ed9 \u0111\u1ed9ng l\u1ef1c b\u1ed1 c\u1ee5c thay th\u1ebf nh\u01b0 s\u1eafp x\u1ebfp v\u00f2ng tr\u00f2n ho\u1eb7c c\u00e1c m\u0169i t\u00ean \u0111\u1ecbnh h\u01b0\u1edbng \u0111\u1ec3 hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng c\u00e1c m\u1ed1i quan h\u1ec7 ph\u1ee5 thu\u1ed9c d\u1eef li\u1ec7u.<\/p>\n
1. B\u1ed1 c\u1ee5c h\u00ecnh tr\u00f2n v\u1edbi c\u00e1c m\u0169i t\u00ean li\u00ean k\u1ebft \u0111\u1ecbnh h\u01b0\u1edbng<\/h3>\n
Thi\u1ebft l\u1eadp layout: 'circular'<\/code>\u0111\u1ec3 s\u1eafp x\u1ebfp c\u00e1c n\u00fat theo c\u1ea5u tr\u00fac v\u00e0nh tr\u00f2n g\u1ecdn g\u00e0ng, v\u00e0 b\u1eadt c\u00e1c m\u0169i t\u00ean c\u1ea1nh \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ed1i quan h\u1ec7 \u0111\u1ecbnh h\u01b0\u1edbng gi\u1eefa c\u00e1c th\u00e0nh ph\u1ea7n:<\/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    series: [\r\n        {\r\n            type: 'graph',\r\n            layout: 'circular',\r\n            roam: true,\r\n            label: {\r\n                show: true,\r\n                position: 'outside'\r\n            },\r\n            edgeSymbol: ['none', 'arrow'], \/\/ V\u1ebd m\u0169i t\u00ean t\u1ea1i c\u00e1c \u0111\u1ea7u n\u1ed1i\r\n            edgeSymbolSize: [0, 8],\r\n            data: [\r\n                { id: 'A', name: 'N\u00fat A', symbolSize: 24 },\r\n                { id: 'B', name: 'N\u00fat B', symbolSize: 24 },\r\n                { id: 'C', name: 'N\u00fat C', symbolSize: 24 },\r\n                { id: 'D', name: 'N\u00fat D', symbolSize: 24 },\r\n                { id: 'E', name: 'N\u00fat E', symbolSize: 24 }\r\n            ],\r\n            links: [\r\n                { source: 'A', target: 'B' },\r\n                { source: 'B', target: 'C' },\r\n                { source: 'C', target: 'D' },\r\n                { source: 'D', target: 'E' },\r\n                { source: 'E', target: 'A' },\r\n                { source: 'A', target: 'C' }\r\n            ],\r\n            lineStyle: {\r\n                color: '#5470c6',\r\n                width: 2,\r\n                curveness: 0.2 \/\/ L\u00e0m cong c\u00e1c \u0111\u01b0\u1eddng n\u1ed1i \u0111\u1ec3 tr\u00e1nh ch\u1ed3ng l\u1ea5n\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 phong c\u00e1ch n\u00fat<\/h2>\n
Vi\u1ec7c \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 cong c\u1ea1nh, b\u00f3ng vi\u1ec1n n\u00fat v\u00e0 c\u00e1c t\u00f9y ch\u1ecdn t\u01b0\u01a1ng t\u00e1c gi\u00fap c\u00e1c c\u1ee5m m\u1ea1ng d\u00e0y \u0111\u1eb7c v\u1eabn d\u1ec5 \u0111\u1ecdc tr\u00ean c\u00e1c trang web t\u01b0\u01a1ng t\u00e1c.<\/p>\n
1. M\u00e0u s\u1eafc danh m\u1ee5c n\u00fat t\u00f9y ch\u1ec9nh v\u00e0 v\u1eadt l\u00fd l\u1ef1c<\/h3>\n
\u0110i\u1ec1u ch\u1ec9nh c\u00e1c gi\u00e1 tr\u1ecb \u0111\u1ea9y v\u00e0 ki\u1ec3u \u0111\u01b0\u1eddng n\u00e9t \u0111\u1ec3 t\u1ea1o ra c\u00e1c c\u1ee5m \u0111\u01b0\u1ee3c c\u1ea5u tr\u00fac, t\u00e1ch bi\u1ec7t v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c:<\/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    legend: {\r\n        top: '5%',\r\n        left: 'center'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'graph',\r\n            layout: 'force',\r\n            roam: true,\r\n            draggable: true,\r\n            force: {\r\n                repulsion: 250,\r\n                gravity: 0.1,\r\n                edgeLength: [50, 100]\r\n            },\r\n            categories: [\r\n                { name: 'Frontend', itemStyle: { color: '#5470c6' } },\r\n                { name: 'Backend', itemStyle: { color: '#91cc75' } },\r\n                { name: 'Infrastructure', itemStyle: { color: '#fac858' } }\r\n            ],\r\n            data: [\r\n                { name: '\u1ee8ng d\u1ee5ng Web', category: 0, symbolSize: 32 },\r\n                { name: '\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng', category: 0, symbolSize: 28 },\r\n                { name: 'C\u1ed5ng API', category: 1, symbolSize: 26 },\r\n                { name: 'Microservice A', category: 1, symbolSize: 22 },\r\n                { name: 'Microservice B', category: 1, symbolSize: 22 },\r\n                { name: 'B\u1ed9 nh\u1edb \u0111\u1ec7m Redis', category: 2, symbolSize: 20 },\r\n                { name: 'PostgreSQL', category: 2, symbolSize: 24 }\r\n            ],\r\n            links: [\r\n                { source: '\u1ee8ng d\u1ee5ng Web', target: 'C\u1ed5ng API' },\r\n                { source: '\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng', target: 'C\u1ed5ng API' },\r\n                { source: 'C\u1ed5ng API', target: 'Microservice A' },\r\n                { source: 'C\u1ed5ng API', target: 'Microservice B' },\r\n                { source: 'Microservice A', target: 'B\u1ed9 nh\u1edb \u0111\u1ec7m Redis' },\r\n                { source: 'Microservice B', target: 'PostgreSQL' }\r\n            ],\r\n            lineStyle: {\r\n                color: 'source', \/\/ M\u00e0u \u0111\u01b0\u1eddng n\u1ed1i d\u1ef1a theo m\u00e0u n\u00fat ngu\u1ed3n\r\n                width: 2,\r\n                curveness: 0.1\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
  • K\u00edch ho\u1ea1t roam: true<\/code>\u0111\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng:<\/strong>C\u00e1c m\u1ea1ng t\u01b0\u01a1ng t\u00e1c ph\u00e1t tri\u1ec3n nhanh ch\u00f3ng. K\u00edch ho\u1ea1t \u0111i\u1ec1u h\u01b0\u1edbng thu ph\u00f3ng v\u00e0 k\u00e9o th\u1ea3 gi\u00fap ng\u01b0\u1eddi d\u00f9ng t\u1eadp trung v\u00e0o c\u00e1c c\u1ee5m c\u1ee5 th\u1ec3 m\u00e0 kh\u00f4ng c\u1ea3m th\u1ea5y ch\u1eadt ch\u1ed9i.<\/li>\n
  • \u00c1p d\u1ee5ng \u0111\u1ed9 cong<\/code>cho c\u00e1c c\u1ea1nh:<\/strong>Thi\u1ebft l\u1eadp \u0111\u1ed9 cong nh\u1eb9 (v\u00ed d\u1ee5, lineStyle.curveness: 0.1<\/code> \u0111\u1ebfn 0.2<\/code>) ng\u0103n ch\u1eb7n c\u00e1c li\u00ean k\u1ebft hai chi\u1ec1u gi\u1eefa hai n\u00fat gi\u1ed1ng nhau b\u1ecb ch\u1ed3ng ch\u00e9o th\u00e0nh m\u1ed9t \u0111\u01b0\u1eddng duy nh\u1ea5t.<\/li>\n
  • L\u1ef1c \u0111\u1ea9y c\u00e2n b\u1eb1ng trong v\u1eadt l\u00fd l\u1ef1c:<\/strong> \u0110i\u1ec1u ch\u1ec9nh l\u1ef1c.\u0111\u1ea9y<\/code> c\u1ea9n th\u1eadn. C\u00e1c gi\u00e1 tr\u1ecb qu\u00e1 th\u1ea5p s\u1ebd khi\u1ebfn c\u00e1c n\u00fat ch\u1ed3ng ch\u00e9o th\u00e0nh m\u1ed9t c\u1ee5m \u0111\u1eb7c, trong khi c\u00e1c gi\u00e1 tr\u1ecb qu\u00e1 cao s\u1ebd \u0111\u1ea9y c\u00e1c n\u00fat ra kh\u1ecfi khung h\u00ecnh hi\u1ec3n th\u1ecb ho\u00e0n to\u00e0n.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi l\u1eadp b\u1ea3n \u0111\u1ed3 c\u00e1c m\u1ea1ng l\u01b0\u1edbi li\u00ean k\u1ebft, c\u00e1c ph\u00e2n c\u1ea5p c\u1ea5u tr\u00fac ho\u1eb7c c\u00e1c m\u1ed1i quan h\u1ec7 th\u1ef1c th\u1ec3 ph\u1ee9c t\u1ea1p, th\u00ecBi\u1ec3u \u0111\u1ed3 \u0111\u1ed3 th\u1ecb (ho\u1eb7c bi\u1ec3u \u0111\u1ed3 m\u1ea1ng l\u01b0\u1edbi) l\u00e0 khung h\u00ecnh \u1ea3nh l\u00fd t\u01b0\u1edfng. B\u1eb1ng c\u00e1ch…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":16,"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-2054","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Graph Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a 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\/graph-chart-network-topology-and-relationship-mapping-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.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\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\",\"name\":\"ECharts Graph 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\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\",\"datePublished\":\"2026-07-27T02:17:47+00:00\",\"description\":\"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot-2026-07-27-at-10.20.29-AM.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/graph-chart-network-topology-and-relationship-mapping-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 \u0111\u1ed3 th\u1ecb: B\u1ea3n \u0111\u1ed3 ki\u1ebfn tr\u00fac m\u1ea1ng v\u00e0 b\u1ea3n \u0111\u1ed3 m\u1ed1i quan h\u1ec7\"}]},{\"@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 Graph Chart Guide | VPasCode Text to Diagram Tool","description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a 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\/graph-chart-network-topology-and-relationship-mapping-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Graph Chart Guide | VPasCode Text to Diagram Tool","og_description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.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\/graph-chart-network-topology-and-relationship-mapping-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/","name":"ECharts Graph 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\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","datePublished":"2026-07-27T02:17:47+00:00","description":"Map complex node-edge relationship networks with ECharts graph charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-27-at-10.20.29-AM.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/graph-chart-network-topology-and-relationship-mapping-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 \u0111\u1ed3 th\u1ecb: B\u1ea3n \u0111\u1ed3 ki\u1ebfn tr\u00fac m\u1ea1ng v\u00e0 b\u1ea3n \u0111\u1ed3 m\u1ed1i quan h\u1ec7"}]},{"@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\/2054","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=2054"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}