{"id":2046,"date":"2026-07-27T03:14:24","date_gmt":"2026-07-27T03:14:24","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/"},"modified":"2026-07-27T03:14:24","modified_gmt":"2026-07-27T03:14:24","slug":"theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 S\u00f4ng Ch\u1ee7 \u0111\u1ec1: Ph\u00e2n t\u00edch lu\u1ed3ng v\u00e0 xu h\u01b0\u1edbng th\u1ec3 lo\u1ea1i li\u00ean t\u1ee5c"},"content":{"rendered":"

Khi theo d\u00f5i c\u00e1ch c\u00e1c th\u1ec3 lo\u1ea1i li\u00ean t\u1ee5c nhi\u1ec1u lo\u1ea1i thay \u0111\u1ed5i theo th\u1eddi gian\u2014v\u00ed d\u1ee5 nh\u01b0 doanh s\u1ed1 s\u1ea3n ph\u1ea9m theo qu\u00fd, xu h\u01b0\u1edbng ch\u1ee7 \u0111\u1ec1 thay \u0111\u1ed5i trong c\u00e1c b\u1ea3n tin tin t\u1ee9c, ho\u1eb7c m\u1eabu ti\u00eau th\u1ee5 ph\u01b0\u01a1ng ti\u1ec7n truy\u1ec1n th\u00f4ng\u2014th\u00ecBi\u1ec3u \u0111\u1ed3 S\u00f4ng Ch\u1ee7 \u0111\u1ec1<\/strong> (m\u1ed9t d\u1ea1ng \u0111\u1eb7c bi\u1ec7t c\u1ee7a bi\u1ec3u \u0111\u1ed3 streamgraph) cung c\u1ea5p m\u1ed9t c\u00e1ch tr\u00ecnh b\u00e0y tr\u1ef1c quan, \u1ea5n t\u01b0\u1ee3ng v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c. Kh\u00e1c v\u1edbi bi\u1ec3u \u0111\u1ed3 v\u00f9ng ch\u1ed3ng ch\u1ea5t th\u00f4ng th\u01b0\u1eddng g\u1eafn v\u00e0o m\u1ed9t \u0111\u01b0\u1eddng n\u1ec1n ph\u1eb3ng, bi\u1ec3u \u0111\u1ed3 S\u00f4ng Ch\u1ee7 \u0111\u1ec1 ch\u1ea3y ngang quanh m\u1ed9t tr\u1ee5c trung t\u00e2m, t\u1ea1o ra m\u1ed9t h\u00ecnh \u1ea3nh tr\u1ef1c quan t\u1ef1 nhi\u00ean gi\u1ed1ng d\u00f2ng s\u00f4ng, n\u01a1i c\u00e1c lu\u1ed3ng ri\u00eang l\u1ebb m\u1edf r\u1ed9ng ho\u1eb7c thu h\u1eb9p t\u00f9y theo s\u1ef1 thay \u0111\u1ed5i gi\u00e1 tr\u1ecb \u0111\u1ecbnh l\u01b0\u1ee3ng.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a Bi\u1ec3u \u0111\u1ed3 S\u00f4ng Ch\u1ee7 \u0111\u1ec1<\/h2>\n

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 S\u00f4ng Ch\u1ee7 \u0111\u1ec1 s\u1eed d\u1ee5ngtype: 'themeRiver'<\/code>. Thay v\u00ec d\u1ef1a v\u00e0o c\u00e1c c\u1ea5u h\u00ecnh truy\u1ec1n th\u1ed1ngxAxis<\/code> v\u00e0 yAxis<\/code>, bi\u1ec3u \u0111\u1ed3 ho\u1ea1t \u0111\u1ed9ng d\u1ef1a tr\u00ean m\u1ed9t tr\u1ee5c ngang duy nh\u1ea5tsingleAxis<\/code> v\u1edbi type: 'time'<\/code> ho\u1eb7c type: 'value'<\/code>. C\u00e1c m\u1ee5c d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c truy\u1ec1n d\u01b0\u1edbi d\u1ea1ng c\u00e1c b\u1ed9 m\u1ea3ng \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng nh\u01b0[th\u1eddi gian, gi\u00e1 tr\u1ecb, t\u00eanTh\u1ec3Lo\u1ea1i]<\/code>.<\/p>\n

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

\u0110\u1ec3 t\u1ea1o m\u1ed9t bi\u1ec3u \u0111\u1ed3 S\u00f4ng Ch\u1ee7 \u0111\u1ec1 c\u01a1 b\u1ea3n, c\u1ea5u h\u00ecnh m\u1ed9tsingleAxis<\/code> c\u00f3 ki\u1ec3u'time'<\/code>, x\u00e1c \u0111\u1ecbnhtype: 'themeRiver'<\/code> trong chu\u1ed7i c\u1ee7a b\u1ea1n, v\u00e0 cung c\u1ea5p c\u00e1c quan s\u00e1t lu\u1ed3ng d\u1eef li\u1ec7u trong m\u1ea3ngdata<\/code>m\u1ea3ng:<\/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: 'axis',\r\n        axisPointer: {\r\n            type: 'line',\r\n            lineStyle: {\r\n                color: 'rgba(0,0,0,0.2)',\r\n                width: 1,\r\n                type: 'solid'\r\n            }\r\n        }\r\n    },\r\n    legend: {\r\n        data: ['C\u00f4ng ngh\u1ec7', 'Th\u1eddi trang', 'Th\u1ec3 thao']\r\n    },\r\n    singleAxis: {\r\n        top: 50,\r\n        bottom: 50,\r\n        axisTick: {},\r\n        axisLabel: {},\r\n        type: 'time',\r\n        axisPointer: {\r\n            animation: true,\r\n            label: { show: true }\r\n        },\r\n        splitLine: {\r\n            show: true,\r\n            lineStyle: {\r\n                type: 'dashed',\r\n                opacity: 0.5\r\n            }\r\n        }\r\n    },\r\n    series: [\r\n        {\r\n            type: 'themeRiver',\r\n            emphasis: {\r\n                itemStyle: {\r\n                    shadowBlur: 20,\r\n                    shadowColor: 'rgba(0, 0, 0, 0.3)'\r\n                }\r\n            },\r\n            data: [\r\n                ['2026-01-01', 12, 'C\u00f4ng ngh\u1ec7'],\r\n                ['2026-02-01', 24, 'C\u00f4ng ngh\u1ec7'],\r\n                ['2026-03-01', 32, 'C\u00f4ng ngh\u1ec7'],\r\n                ['2026-04-01', 18, 'C\u00f4ng ngh\u1ec7'],\r\n                ['2026-01-01', 15, 'Th\u1eddi trang'],\r\n                ['2026-02-01', 18, 'Th\u1eddi trang'],\r\n                ['2026-03-01', 10, 'Th\u1eddi trang'],\r\n                ['2026-04-01', 25, 'Th\u1eddi trang'],\r\n                ['2026-01-01', 8, 'Th\u1ec3 thao'],\r\n                ['2026-02-01', 12, 'Th\u1ec3 thao'],\r\n                ['2026-03-01', 28, 'Th\u1ec3 thao'],\r\n                ['2026-04-01', 20, 'Th\u1ec3 thao']\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 Theme River t\u1ecf ra xu\u1ea5t s\u1eafc khi theo d\u00f5i c\u00e1c s\u1ef1 ki\u1ec7n \u0111a th\u1ec3 lo\u1ea1i ph\u1ee9c t\u1ea1p qua c\u00e1c chu\u1ed7i th\u1eddi gian d\u00e0i v\u1edbi c\u00e1c c\u00f4ng c\u1ee5 g\u1ee3i \u00fd t\u00f9y ch\u1ec9nh v\u00e0 b\u1ea3ng m\u00e0u th\u1ec3 lo\u1ea1i \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng.<\/p>\n
1. D\u00f2ng l\u01b0u l\u01b0\u1ee3ng ph\u01b0\u01a1ng ti\u1ec7n \u0111a lu\u1ed3ng<\/h3>\n
T\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc lu\u1ed3ng v\u1edbi c\u00e1c b\u1ea3n \u0111\u1ed3 b\u1ea3ng m\u00e0u r\u00f5 r\u00e0ng v\u00e0 c\u00f4ng c\u1ee5 g\u1ee3i \u00fd tr\u1ee5c t\u00f9y ch\u1ec9nh bi\u1ebfn nh\u1eadt k\u00fd s\u1ef1 ki\u1ec7n th\u00f4 th\u00e0nh m\u1ed9t d\u00f2ng th\u1eddi gian ho\u1ea1t \u0111\u1ed9ng s\u1ea1ch s\u1ebd:<\/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                    
const categories = ['B\u00e0i vi\u1ebft', 'L\u01b0\u1ee3t xem video', 'L\u01b0\u1ee3t ph\u00e1t podcast', 'Chia s\u1ebb tr\u00ean m\u1ea1ng x\u00e3 h\u1ed9i'];\r\n\r\noption = {\r\n    title: {\r\n        text: 'D\u00f2ng t\u01b0\u01a1ng t\u00e1c n\u1ed9i dung',\r\n        left: 'center'\r\n    },\r\n    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: {\r\n            type: 'line',\r\n            lineStyle: {\r\n                color: '#333',\r\n                width: 1\r\n            }\r\n        }\r\n    },\r\n    legend: {\r\n        data: categories,\r\n        bottom: 10\r\n    },\r\n    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],\r\n    singleAxis: {\r\n        top: '15%',\r\n        bottom: '20%',\r\n        type: 'time',\r\n        axisLine: { lineStyle: { color: '#ccc' } },\r\n        splitLine: { show: false }\r\n    },\r\n    series: [\r\n        {\r\n            type: 'themeRiver',\r\n            label: {\r\n                show: true,\r\n                position: 'left',\r\n                fontSize: 12\r\n            },\r\n            data: [\r\n                ['2026-01-01', 120, 'B\u00e0i vi\u1ebft'], ['2026-02-01', 200, 'B\u00e0i vi\u1ebft'], ['2026-03-01', 150, 'B\u00e0i vi\u1ebft'], ['2026-04-01', 80, 'B\u00e0i vi\u1ebft'],\r\n                ['2026-01-01', 60, 'L\u01b0\u1ee3t xem video'], ['2026-02-01', 140, 'L\u01b0\u1ee3t xem video'], ['2026-03-01', 220, 'L\u01b0\u1ee3t xem video'], ['2026-04-01', 310, 'L\u01b0\u1ee3t xem video'],\r\n                ['2026-01-01', 30, 'L\u01b0\u1ee3t ph\u00e1t podcast'], ['2026-02-01', 45, 'L\u01b0\u1ee3t ph\u00e1t podcast'], ['2026-03-01', 90, 'L\u01b0\u1ee3t ph\u00e1t podcast'], ['2026-04-01', 110, 'L\u01b0\u1ee3t ph\u00e1t podcast'],\r\n                ['2026-01-01', 180, 'Chia s\u1ebb tr\u00ean m\u1ea1ng x\u00e3 h\u1ed9i'], ['2026-02-01', 110, 'Chia s\u1ebb tr\u00ean m\u1ea1ng x\u00e3 h\u1ed9i'], ['2026-03-01', 70, 'Chia s\u1ebb tr\u00ean m\u1ea1ng x\u00e3 h\u1ed9i'], ['2026-04-01', 95, 'Chia s\u1ebb tr\u00ean m\u1ea1ng x\u00e3 h\u1ed9i']\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
  • \u0110\u1ecbnh d\u1ea1ng c\u00e1c b\u1ed9 d\u1eef li\u1ec7u \u0111\u00fang c\u00e1ch:<\/strong> M\u1ed7i m\u1ee5c trong data<\/code> m\u1ea3ng ph\u1ea3i tu\u00e2n theo th\u1ee9 t\u1ef1 ch\u00ednh x\u00e1c [ng\u00e0y, gi\u00e1 tr\u1ecb, t\u00eanTh\u1ec3Lo\u1ea1i]<\/code> \u0111\u1ec3 ECharts c\u00f3 th\u1ec3 c\u1eaft v\u00e0 ch\u1ed3ng c\u00e1c lu\u1ed3ng li\u00ean t\u1ee5c m\u1ed9t c\u00e1ch ch\u00ednh x\u00e1c.<\/li>\n
  • H\u1ea1n ch\u1ebf s\u1ef1 lan r\u1ed9ng th\u1ec3 lo\u1ea1i:<\/strong> Gi\u1eef s\u1ed1 l\u01b0\u1ee3ng th\u1ec3 lo\u1ea1i kh\u00e1c nhau trong kho\u1ea3ng t\u1eeb 3 \u0111\u1ebfn 7. Qu\u00e1 nhi\u1ec1u lu\u1ed3ng s\u1ebd khi\u1ebfn c\u00e1c d\u1ea3i ri\u00eang l\u1ebb tr\u1edf n\u00ean h\u1eb9p v\u00e0 kh\u00f3 theo d\u00f5i qua c\u00e1c \u0111i\u1ec3m th\u1eddi gian.<\/li>\n
  • T\u1eadn d\u1ee5ng singleAxis<\/code> K\u00edch th\u01b0\u1edbc:<\/strong> \u0110i\u1ec1u ch\u1ec9nh top<\/code> v\u00e0 bottom<\/code> tr\u00ean singleAxis<\/code> thu\u1ed9c t\u00ednh \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n kho\u1ea3ng c\u00e1ch d\u1ecdc v\u00e0 ng\u0103n c\u00e1c nh\u00e3n lu\u1ed3ng b\u00ean ngo\u00e0i b\u1ecb c\u1eaft ngang m\u00e9p c\u1ee7a container.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi theo d\u00f5i c\u00e1ch c\u00e1c th\u1ec3 lo\u1ea1i li\u00ean t\u1ee5c nhi\u1ec1u lo\u1ea1i thay \u0111\u1ed5i theo th\u1eddi gian\u2014v\u00ed d\u1ee5 nh\u01b0 doanh s\u1ed1 s\u1ea3n ph\u1ea9m theo qu\u00fd, xu h\u01b0\u1edbng ch\u1ee7 \u0111\u1ec1 thay \u0111\u1ed5i trong c\u00e1c b\u1ea3n tin tin t\u1ee9c, ho\u1eb7c m\u1eabu ti\u00eau th\u1ee5…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":24,"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-2046","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Theme River Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Visualize continuous thematic changes over time using ECharts theme river 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\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Theme River Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Visualize continuous thematic changes over time using ECharts theme river charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-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_6a66cd97ad629.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\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/\",\"name\":\"ECharts Theme River Guide | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cd97ad629.png\",\"datePublished\":\"2026-07-27T03:14:24+00:00\",\"description\":\"Visualize continuous thematic changes over time using ECharts theme river charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cd97ad629.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66cd97ad629.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-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 S\u00f4ng Ch\u1ee7 \u0111\u1ec1: Ph\u00e2n t\u00edch lu\u1ed3ng v\u00e0 xu h\u01b0\u1edbng th\u1ec3 lo\u1ea1i li\u00ean t\u1ee5c\"}]},{\"@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 Theme River Guide | VPasCode Text to Diagram Guide","description":"Visualize continuous thematic changes over time using ECharts theme river 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\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Theme River Guide | VPasCode Text to Diagram Guide","og_description":"Visualize continuous thematic changes over time using ECharts theme river charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629.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\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","name":"ECharts Theme River Guide | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629.png","datePublished":"2026-07-27T03:14:24+00:00","description":"Visualize continuous thematic changes over time using ECharts theme river charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-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 S\u00f4ng Ch\u1ee7 \u0111\u1ec1: Ph\u00e2n t\u00edch lu\u1ed3ng v\u00e0 xu h\u01b0\u1edbng th\u1ec3 lo\u1ea1i li\u00ean t\u1ee5c"}]},{"@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\/2046","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=2046"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}