{"id":2050,"date":"2026-07-27T02:31:06","date_gmt":"2026-07-27T02:31:06","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/sankey-chart-directional-flow-and-volume-transitions-guide\/"},"modified":"2026-07-27T02:31:06","modified_gmt":"2026-07-27T02:31:06","slug":"sankey-chart-directional-flow-and-volume-transitions-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 Sankey: D\u00f2ng ch\u1ea3y theo h\u01b0\u1edbng v\u00e0 chuy\u1ec3n \u0111\u1ed5i kh\u1ed1i l\u01b0\u1ee3ng"},"content":{"rendered":"

Khi theo d\u00f5i c\u00e1c chuy\u1ec3n giao li\u00ean t\u1ee5c, ph\u00e2n b\u1ed5 ngu\u1ed3n l\u1ef1c ho\u1eb7c h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng \u0111a giai \u0111o\u1ea1n, th\u00ecBi\u1ec3u \u0111\u1ed3 Sankey<\/strong> l\u00e0 c\u00f4ng c\u1ee5 tr\u1ef1c quan h\u00f3a h\u00e0ng \u0111\u1ea7u. B\u1eb1ng c\u00e1ch v\u1ebd c\u00e1c d\u1ea3i d\u00f2ng ch\u1ea3y t\u1ef7 l\u1ec7 gi\u1eefa c\u00e1c n\u00fat giai \u0111o\u1ea1n theo th\u1ee9 t\u1ef1, bi\u1ec3u \u0111\u1ed3 Sankey minh h\u1ecdac\u00e1ch t\u1ed5ng l\u01b0\u1ee3ng \u0111\u01b0\u1ee3c chia t\u00e1ch, k\u1ebft h\u1ee3p v\u00e0 chuy\u1ec3n ti\u1ebfp qua c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p<\/em>\u2014v\u00ed d\u1ee5 nh\u01b0 \u1ed1ng d\u1eabn chuy\u1ec3n \u0111\u1ed5i ng\u01b0\u1eddi d\u00f9ng trang web, m\u1ea1ng l\u01b0\u1edbi ph\u00e2n ph\u1ed1i n\u0103ng l\u01b0\u1ee3ng ho\u1eb7c ph\u00e2n b\u1ed5 ng\u00e2n s\u00e1ch t\u1ed5 ch\u1ee9c.<\/p>\n

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

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 Sankey s\u1eed d\u1ee5ngtype: 'sankey'<\/code>. T\u01b0\u01a1ng t\u1ef1 nh\u01b0 bi\u1ec3u \u0111\u1ed3 \u0111\u1ed3 th\u1ecb, m\u1ed9t bi\u1ec3u \u0111\u1ed3 Sankey \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1edfi danh s\u00e1ch c\u00e1cn\u00fat<\/code> (ho\u1eb7cdata<\/code>) v\u00e0 c\u00e1clinks<\/code> (ho\u1eb7cc\u1ea1nh<\/code>). M\u1ed7i li\u00ean k\u1ebft ch\u1ee9a t\u00eanngu\u1ed3n<\/code>t\u00ean n\u00fat ngu\u1ed3n, t\u00eanm\u1ee5c ti\u00eau<\/code>t\u00ean n\u00fat \u0111\u00edch, v\u00e0 m\u1ed9t gi\u00e1 tr\u1ecb s\u1ed1gi\u00e1 tr\u1ecb<\/code>x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 r\u1ed9ng tr\u1ef1c quan c\u1ee7a \u0111\u01b0\u1eddng d\u00f2ng ch\u1ea3y k\u1ebft n\u1ed1i.<\/p>\n

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

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 Sankey c\u01a1 b\u1ea3n, khai b\u00e1o c\u00e1c m\u1ee5c n\u00fat c\u1ee7a b\u1ea1n b\u00ean trongdata<\/code>v\u00e0 x\u00e1c \u0111\u1ecbnh th\u1ec3 t\u00edch d\u00f2ng ch\u1ea3y theo h\u01b0\u1edbng tronglinks<\/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        trigger: 'item',\r\n        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sankey',\r\n            data: [\r\n                { name: 'Doanh thu t\u1ed5ng c\u1ed9ng' },\r\n                { name: 'B\u00e1n h\u00e0ng s\u1ea3n ph\u1ea9m' },\r\n                { name: 'D\u1ecbch v\u1ee5' },\r\n                { name: 'Ti\u1ebfp th\u1ecb' },\r\n                { name: 'Nghi\u00ean c\u1ee9u v\u00e0 ph\u00e1t tri\u1ec3n' },\r\n                { name: 'L\u1ee3i nhu\u1eadn' }\r\n            ],\r\n            links: [\r\n                { source: 'Doanh thu t\u1ed5ng c\u1ed9ng', target: 'B\u00e1n h\u00e0ng s\u1ea3n ph\u1ea9m', value: 70 },\r\n                { source: 'Doanh thu t\u1ed5ng c\u1ed9ng', target: 'D\u1ecbch v\u1ee5', value: 30 },\r\n                { source: 'B\u00e1n h\u00e0ng s\u1ea3n ph\u1ea9m', target: 'Ti\u1ebfp th\u1ecb', value: 30 },\r\n                { source: 'B\u00e1n h\u00e0ng s\u1ea3n ph\u1ea9m', target: 'Nghi\u00ean c\u1ee9u v\u00e0 ph\u00e1t tri\u1ec3n', value: 25 },\r\n                { source: 'B\u00e1n h\u00e0ng s\u1ea3n ph\u1ea9m', target: 'L\u1ee3i nhu\u1eadn', value: 15 },\r\n                { source: 'D\u1ecbch v\u1ee5', target: 'L\u1ee3i nhu\u1eadn', value: 30 }\r\n            ],\r\n            emphasis: {\r\n                focus: 'adjacency'\r\n            },\r\n            lineStyle: {\r\n                color: 'gradient',\r\n                curveness: 0.5\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 Sankey c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u00f9y ch\u1ec9nh v\u1edbi h\u01b0\u1edbng d\u00f2ng ch\u1ea3y th\u1eb3ng \u0111\u1ee9ng, m\u00e0u s\u1eafc n\u00fat \u0111a c\u1ea5p v\u00e0 l\u00e0m n\u1ed5i b\u1eadt li\u00ean k\u1ebft \u0111\u1ed9ng \u0111\u1ec3 theo d\u00f5i t\u1eebng h\u00e0nh tr\u00ecnh ri\u00eang l\u1ebb qua c\u00e1c m\u1ea1ng l\u01b0\u1edbi ph\u1ee9c t\u1ea1p.<\/p>\n
1. H\u01b0\u1edbng d\u00f2ng ch\u1ea3y th\u1eb3ng \u0111\u1ee9ng<\/h3>\n
Thi\u1ebft l\u1eadp orient: 'vertical'<\/code>\u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i c\u00e1c lu\u1ed3ng giai \u0111o\u1ea1n ngang th\u00e0nh ch\u1ebf \u0111\u1ed9 xem th\u00e1c n\u01b0\u1edbc th\u1eb3ng \u0111\u1ee9ng t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: {\r\n        trigger: 'item',\r\n        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sankey',\r\n            orient: 'vertical',\r\n            nodeWidth: 20,\r\n            nodeGap: 16,\r\n            data: [\r\n                { name: 'L\u01b0\u1ee3t truy c\u1eadp trang web' },\r\n                { name: 'Trang s\u1ea3n ph\u1ea9m' },\r\n                { name: 'B\u1ecf trang ngay' },\r\n                { name: 'Gi\u1ecf h\u00e0ng' },\r\n                { name: 'Thanh to\u00e1n' }\r\n            ],\r\n            links: [\r\n                { source: 'L\u01b0\u1ee3t truy c\u1eadp trang web', target: 'Trang s\u1ea3n ph\u1ea9m', value: 1000 },\r\n                { source: 'L\u01b0\u1ee3t truy c\u1eadp trang web', target: 'B\u1ecf trang ngay', value: 400 },\r\n                { source: 'Trang s\u1ea3n ph\u1ea9m', target: 'Gi\u1ecf h\u00e0ng', value: 600 },\r\n                { source: 'Gi\u1ecf h\u00e0ng', target: 'Thanh to\u00e1n', value: 450 }\r\n            ],\r\n            lineStyle: {\r\n                color: 'source',\r\n                curveness: 0.5\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 li\u00ean k\u1ebft<\/h2>\n
Vi\u1ec7c \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch n\u00fat, \u0111\u1ed9 cong \u0111\u01b0\u1eddng k\u1ebb v\u00e0 h\u00e0nh vi l\u00e0m n\u1ed5i b\u1eadt khi di chu\u1ed9t gi\u00fap c\u00e1c lu\u1ed3ng \u0111a giai \u0111o\u1ea1n ph\u1ee9c t\u1ea1p lu\u00f4n r\u00f5 r\u00e0ng v\u00e0 d\u1ec5 \u0111\u1ecdc.<\/p>\n
1. \u0110i\u1ec1u khi\u1ec3n kho\u1ea3ng c\u00e1ch n\u00fat v\u00e0 lu\u1ed3ng gradient ngu\u1ed3n – \u0111\u00edch<\/h3>\n
T\u00f9y ch\u1ec9nh nodeGap<\/code> v\u00e0 thi\u1ebft l\u1eadp lineStyle.color: 'gradient'<\/code>t\u1ea1o ra c\u00e1c chuy\u1ec3n ti\u1ebfp m\u00e0u s\u1eafc m\u01b0\u1ee3t m\u00e0 gi\u1eefa c\u00e1c giai \u0111o\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    series: [\r\n        {\r\n            type: 'sankey',\r\n            left: '5%',\r\n            right: '15%',\r\n            nodeWidth: 24,\r\n            nodeGap: 18,\r\n            draggable: true,\r\n            label: {\r\n                position: 'right',\r\n                color: '#333',\r\n                fontSize: 12\r\n            },\r\n            data: [\r\n                { name: 'Ngu\u1ed3n A', itemStyle: { color: '#5470c6' } },\r\n                { name: 'Ngu\u1ed3n B', itemStyle: { color: '#91cc75' } },\r\n                { name: 'Giai \u0111o\u1ea1n 1', itemStyle: { color: '#fac858' } },\r\n                { name: 'Giai \u0111o\u1ea1n 2', itemStyle: { color: '#ee6666' } },\r\n                { name: 'K\u1ebft qu\u1ea3 cu\u1ed1i c\u00f9ng', itemStyle: { color: '#73c0de' } }\r\n            ],\r\n            links: [\r\n                { source: 'Ngu\u1ed3n A', target: 'Giai \u0111o\u1ea1n 1', value: 50 },\r\n                { source: 'Ngu\u1ed3n B', target: 'Giai \u0111o\u1ea1n 1', value: 30 },\r\n                { source: 'Giai \u0111o\u1ea1n 1', target: 'Giai \u0111o\u1ea1n 2', value: 60 },\r\n                { source: 'Giai \u0111o\u1ea1n 1', target: 'K\u1ebft qu\u1ea3 cu\u1ed1i c\u00f9ng', value: 20 },\r\n                { source: 'Giai \u0111o\u1ea1n 2', target: 'K\u1ebft qu\u1ea3 cu\u1ed1i c\u00f9ng', value: 60 }\r\n            ],\r\n            lineStyle: {\r\n                color: 'gradient',\r\n                curveness: 0.6,\r\n                opacity: 0.4\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
  • Duy tr\u00ec b\u1ea3o to\u00e0n d\u00f2ng ch\u1ea3y:<\/strong> \u0110\u1ea3m b\u1ea3o t\u1ed5ng c\u00e1c gi\u00e1 tr\u1ecb ch\u1ea3y v\u00e0o m\u1ed9t n\u00fat b\u1eb1ng ho\u1eb7c h\u1ee3p l\u00fd gi\u1ea3i th\u00edch c\u00e1c gi\u00e1 tr\u1ecb ch\u1ea3y ra \u0111\u1ec3 tr\u00e1nh c\u00e1c kho\u1ea3ng tr\u1ed1ng th\u1ecb gi\u00e1c g\u00e2y hi\u1ec3u l\u1ea7m.<\/li>\n
  • K\u00edch ho\u1ea1t emphasis.focus: 'k\u1ec1 c\u1eadn'<\/code>:<\/strong>Khi x\u1eed l\u00fd c\u00e1c lu\u1ed3ng nhi\u1ec1u giai \u0111o\u1ea1n, vi\u1ec7c t\u1eadp trung v\u00e0o c\u00e1c li\u00ean k\u1ebft k\u1ec1 c\u1eadn khi di chu\u1ed9t qua cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng t\u00e1ch bi\u1ec7t c\u00e1c con \u0111\u01b0\u1eddng c\u1ee5 th\u1ec3 m\u00e0 kh\u00f4ng b\u1ecb nhi\u1ec5u h\u00ecnh \u1ea3nh.<\/li>\n
  • S\u1eed d\u1ee5ng li\u00ean k\u1ebft_gradient:<\/strong> \u0110\u1eb7t lineStyle.color: 'gradient'<\/code>t\u1ea1o s\u1ef1 chuy\u1ec3n ti\u1ebfp m\u01b0\u1ee3t m\u00e0 t\u1eeb m\u00e0u n\u00fat ngu\u1ed3n sang m\u00e0u n\u00fat \u0111\u00edch, gi\u00fap c\u00e1c chuy\u1ec3n ti\u1ebfp nhi\u1ec1u giai \u0111o\u1ea1n tr\u1edf n\u00ean tr\u1ef1c quan v\u1ec1 m\u1eb7t h\u00ecnh \u1ea3nh.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi theo d\u00f5i c\u00e1c chuy\u1ec3n giao li\u00ean t\u1ee5c, ph\u00e2n b\u1ed5 ngu\u1ed3n l\u1ef1c ho\u1eb7c h\u00e0nh tr\u00ecnh ng\u01b0\u1eddi d\u00f9ng \u0111a giai \u0111o\u1ea1n, th\u00ecBi\u1ec3u \u0111\u1ed3 Sankey l\u00e0 c\u00f4ng c\u1ee5 tr\u1ef1c quan h\u00f3a h\u00e0ng \u0111\u1ea7u. B\u1eb1ng c\u00e1ch v\u1ebd c\u00e1c d\u1ea3i d\u00f2ng ch\u1ea3y t\u1ef7 l\u1ec7…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":20,"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-2050","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Sankey Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Visualize energy, financial, or data volume flows using ECharts Sankey 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\/sankey-chart-directional-flow-and-volume-transitions-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-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_6a66c3f3b1539.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\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/\",\"name\":\"ECharts Sankey 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\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c3f3b1539.png\",\"datePublished\":\"2026-07-27T02:31:06+00:00\",\"description\":\"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c3f3b1539.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66c3f3b1539.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/sankey-chart-directional-flow-and-volume-transitions-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 Sankey: D\u00f2ng ch\u1ea3y theo h\u01b0\u1edbng v\u00e0 chuy\u1ec3n \u0111\u1ed5i kh\u1ed1i l\u01b0\u1ee3ng\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool","description":"Visualize energy, financial, or data volume flows using ECharts Sankey 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\/sankey-chart-directional-flow-and-volume-transitions-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool","og_description":"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c3f3b1539.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\/sankey-chart-directional-flow-and-volume-transitions-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-guide\/","name":"ECharts Sankey 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\/sankey-chart-directional-flow-and-volume-transitions-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c3f3b1539.png","datePublished":"2026-07-27T02:31:06+00:00","description":"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c3f3b1539.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66c3f3b1539.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/sankey-chart-directional-flow-and-volume-transitions-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 Sankey: D\u00f2ng ch\u1ea3y theo h\u01b0\u1edbng v\u00e0 chuy\u1ec3n \u0111\u1ed5i kh\u1ed1i l\u01b0\u1ee3ng"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/2050","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=2050"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}