{"id":1389,"date":"2026-07-27T03:14:24","date_gmt":"2026-07-27T03:14:24","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis\/"},"modified":"2026-07-30T01:28:50","modified_gmt":"2026-07-30T01:28:50","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\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","title":{"rendered":"Theme River Chart: Continuous Categorical Flow and Trend Analysis"},"content":{"rendered":"<p>When tracking how multiple continuous categories evolve over time\u2014such as product sales across quarters, changing topic trends in news coverage, or media consumption patterns\u2014the <strong>Theme River Chart<\/strong> (a specialized form of a streamgraph) provides an intuitive, visually striking presentation. Unlike standard stacked area charts that anchor to a flat baseline, a Theme River chart flows horizontally around a central axis, creating an organic, river-like visualization where individual streams widen or shrink based on quantitative value shifts.<\/p>\n<h2>The Mechanics of Theme River Charts<\/h2>\n<p>In Apache ECharts, Theme River charts use <code>type: 'themeRiver'<\/code>. Instead of relying on traditional <code>xAxis<\/code> and <code>yAxis<\/code> configurations, the chart operates on a single horizontal <code>singleAxis<\/code> with <code>type: 'time'<\/code> or <code>type: 'value'<\/code>. Data items are passed as array tuples formatted as <code>[time, value, categoryName]<\/code>.<\/p>\n<h3>1. Essential Setup<\/h3>\n<p>To create a basic Theme River chart, configure a <code>singleAxis<\/code> of type <code>'time'<\/code>, specify <code>type: 'themeRiver'<\/code> in your series, and supply your flow observations in the <code>data<\/code> array:<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqVVMFOwzAMvSPxD7kFpDJ1GUOoiAMgcdoBAbdph2y1Wou0qZqMMaH+O0mXam06UHB7aJxn+8XPqaw0ypLck+\/zM2JMSyk0Vkm3bn01ZhnUCaH8CxWNjjt2\/SKx1Ha3F9FG7SswIQJL6IdYs743vRcwCrK2kULaYnW25hdx1D4TduknsbbDVOcJmZ7YcuWVFJjS4XZzXLrPxiUQkEGZDlilXPOELOk7bHIaEfrMVW46Zj\/fKllrRVfDHArLTMCD6cywidI0dR73mK6l1rLwnLaj77j5MLGN517wNQjP706psYBQXXiJBbeiJ0bYLfjSuCJE5XJ3QAz61YOrSqBeGClHJY6x\/xLeHSY1HYb0lNyy4hvU+4TEk3mopApqBCPF8og4Pag6hwJe8RNqvzQUVc6Vp2dnqKH4\/UiHbvBU7h7F1mjB4ugv0NNw9Il7J7NLOg5rvBZ4md3gjuOWlMXs5iqemteM8ZSZUW6nexX9DmYHMLsOAc8O4FlQ5mtH4zYE3HGe925iAO02eQjeMZ\/GgXhHnoXycfxve3+PAPYsDO7Is8DsHfd49CvrbDW6VcbT3P0AHUBKwg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code data-language=\"echarts\" class=\"language-echarts\">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: ['Tech', 'Fashion', 'Sports']\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, 'Tech'],\r\n                ['2026-02-01', 24, 'Tech'],\r\n                ['2026-03-01', 32, 'Tech'],\r\n                ['2026-04-01', 18, 'Tech'],\r\n                ['2026-01-01', 15, 'Fashion'],\r\n                ['2026-02-01', 18, 'Fashion'],\r\n                ['2026-03-01', 10, 'Fashion'],\r\n                ['2026-04-01', 25, 'Fashion'],\r\n                ['2026-01-01', 8, 'Sports'],\r\n                ['2026-02-01', 12, 'Sports'],\r\n                ['2026-03-01', 28, 'Sports'],\r\n                ['2026-04-01', 20, 'Sports']\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqVVMFOwzAMvSPxD7kFpDJ1GUOoiAMgcdoBAbdph2y1Wou0qZqMMaH+O0mXam06UHB7aJxn+8XPqaw0ypLck+\/zM2JMSyk0Vkm3bn01ZhnUCaH8CxWNjjt2\/SKx1Ha3F9FG7SswIQJL6IdYs743vRcwCrK2kULaYnW25hdx1D4TduknsbbDVOcJmZ7YcuWVFJjS4XZzXLrPxiUQkEGZDlilXPOELOk7bHIaEfrMVW46Zj\/fKllrRVfDHArLTMCD6cywidI0dR73mK6l1rLwnLaj77j5MLGN517wNQjP706psYBQXXiJBbeiJ0bYLfjSuCJE5XJ3QAz61YOrSqBeGClHJY6x\/xLeHSY1HYb0lNyy4hvU+4TEk3mopApqBCPF8og4Pag6hwJe8RNqvzQUVc6Vp2dnqKH4\/UiHbvBU7h7F1mjB4ugv0NNw9Il7J7NLOg5rvBZ4md3gjuOWlMXs5iqemteM8ZSZUW6nexX9DmYHMLsOAc8O4FlQ5mtH4zYE3HGe925iAO02eQjeMZ\/GgXhHnoXycfxve3+PAPYsDO7Is8DsHfd49CvrbDW6VcbT3P0AHUBKwg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"sLHoUlY\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2119\" height=\"1392\" class=\"alignnone size-full wp-image-1391 \" src=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629.png 2119w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629-300x197.png 300w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629-1024x673.png 1024w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629-768x505.png 768w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629-1536x1009.png 1536w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629-2048x1345.png 2048w\" sizes=\"(max-width: 2119px) 100vw, 2119px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Advanced Structural Techniques<\/h2>\n<p>Theme River charts excel when monitoring complex multi-category events across long timeline sequences with custom tooltips and styled category palettes.<\/p>\n<h3>1. Multi-Stream Media Volume Flow<\/h3>\n<p>Customizing stream colors with explicit palette mappings and custom axis tooltips turns raw event logs into a clean activity timeline:<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqFVE2L2zAQvQfyHwRh0WULlh3na+lhWXrrITSwl5CDVp44AsUK9rTZtOS\/d2wrH7K9jsjBGr158\/RmImWzApmSCKnNNRTsO1vz1xy1MlDwZ8bfdQKWvWs4VtulTZSkjKWRpyqwskpLw1Y7mVPC5mU4GA7sAbXNiOrfcMBooUYDi8uuisAnLhh\/sxlChuxHlsoU9uXnCnOQe6K+gQ1sS7CiY8h5HT+7c7TWoD745LlOU8gpRX5qj6ncL60uebyMKut0II3c6AzuUyoBFFvhqXGHy1LW2LLYKIqiZma5jjrB3YIJ\/+R82579KxlIIUu8UolEubjr0l2VD4to90Qf+CxO1ZqP4vE0UJOyV6O5UGoaV59bqWbxrPoEmNDiG5dZ6Cw18EpW+a5acpmL+Il3VOdh4MWdmaj30PT\/J5lJxJ6pNw+VUpydr7eo9ByMxktWsbPHBdtKU0DTtwJKa+jKt9TuFuOORu2X\/kPD1Gy0\/ADT2eS6Lua\/oaPDB1vocuLL8aFZ7RqCLU36Sv+l8iJsDEIDXfd63aZYk8nh5Fsg6Ed9E2FAzbv+VTfPV0BYA8LgK0DkGOKvAOMaMGucP9Q0CRovRluVGPdgnLAw7ME4bZFoYx7qi4LWE9ZWOI77QE7ivJfJaRSiC\/W4s5XvjYe1baToRTmd016Q0zmP2yBf5ab1WlHk\/PIfilp5hg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code data-language=\"echarts\" class=\"language-echarts\">const categories = ['Articles', 'Video Views', 'Podcast Plays', 'Social Shares'];\r\n\r\noption = {\r\n    title: {\r\n        text: 'Content Engagement Streams',\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, 'Articles'], ['2026-02-01', 200, 'Articles'], ['2026-03-01', 150, 'Articles'], ['2026-04-01', 80, 'Articles'],\r\n                ['2026-01-01', 60, 'Video Views'], ['2026-02-01', 140, 'Video Views'], ['2026-03-01', 220, 'Video Views'], ['2026-04-01', 310, 'Video Views'],\r\n                ['2026-01-01', 30, 'Podcast Plays'], ['2026-02-01', 45, 'Podcast Plays'], ['2026-03-01', 90, 'Podcast Plays'], ['2026-04-01', 110, 'Podcast Plays'],\r\n                ['2026-01-01', 180, 'Social Shares'], ['2026-02-01', 110, 'Social Shares'], ['2026-03-01', 70, 'Social Shares'], ['2026-04-01', 95, 'Social Shares']\r\n            ]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqFVE2L2zAQvQfyHwRh0WULlh3na+lhWXrrITSwl5CDVp44AsUK9rTZtOS\/d2wrH7K9jsjBGr158\/RmImWzApmSCKnNNRTsO1vz1xy1MlDwZ8bfdQKWvWs4VtulTZSkjKWRpyqwskpLw1Y7mVPC5mU4GA7sAbXNiOrfcMBooUYDi8uuisAnLhh\/sxlChuxHlsoU9uXnCnOQe6K+gQ1sS7CiY8h5HT+7c7TWoD745LlOU8gpRX5qj6ncL60uebyMKut0II3c6AzuUyoBFFvhqXGHy1LW2LLYKIqiZma5jjrB3YIJ\/+R82579KxlIIUu8UolEubjr0l2VD4to90Qf+CxO1ZqP4vE0UJOyV6O5UGoaV59bqWbxrPoEmNDiG5dZ6Cw18EpW+a5acpmL+Il3VOdh4MWdmaj30PT\/J5lJxJ6pNw+VUpydr7eo9ByMxktWsbPHBdtKU0DTtwJKa+jKt9TuFuOORu2X\/kPD1Gy0\/ADT2eS6Lua\/oaPDB1vocuLL8aFZ7RqCLU36Sv+l8iJsDEIDXfd63aZYk8nh5Fsg6Ed9E2FAzbv+VTfPV0BYA8LgK0DkGOKvAOMaMGucP9Q0CRovRluVGPdgnLAw7ME4bZFoYx7qi4LWE9ZWOI77QE7ivJfJaRSiC\/W4s5XvjYe1baToRTmd016Q0zmP2yBf5ab1WlHk\/PIfilp5hg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"ZjDljZM\"><img decoding=\"async\" width=\"2119\" height=\"1461\" class=\"alignnone size-full wp-image-1392 \" src=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66ce50df472.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66ce50df472.png 2119w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66ce50df472-300x207.png 300w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66ce50df472-1024x706.png 1024w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66ce50df472-768x530.png 768w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66ce50df472-1536x1059.png 1536w, https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66ce50df472-2048x1412.png 2048w\" sizes=\"(max-width: 2119px) 100vw, 2119px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Strategic Best Practices<\/h2>\n<ul>\n<li><strong>Format Data Tuples Correctly:<\/strong> Each entry in the <code>data<\/code> array must follow the exact order <code>[date, value, categoryName]<\/code> for ECharts to properly slice and stack continuous streams.<\/li>\n<li><strong>Limit Category Sprawl:<\/strong> Keep the number of distinct categories between 3 and 7. Too many streams make individual bands narrow and hard to trace across time points.<\/li>\n<li><strong>Leverage <code>singleAxis<\/code> Sizing:<\/strong> Adjust <code>top<\/code> and <code>bottom<\/code> on the <code>singleAxis<\/code> property to control vertical padding and prevent outer stream labels from clipping against the container edges.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When tracking how multiple continuous categories evolve over time\u2014such as product sales across quarters, changing topic trends in news coverage, or media consumption patterns\u2014the Theme River Chart (a specialized form of a streamgraph) provides an intuitive, visually striking presentation. Unlike&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1254,"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-1389","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ECharts 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\/echarts-playbook\/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\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T01:28:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/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\\\/echarts-playbook\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/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\\\/echarts-playbook\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a66cd97ad629.png\",\"datePublished\":\"2026-07-27T03:14:24+00:00\",\"dateModified\":\"2026-07-30T01:28:50+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\\\/echarts-playbook\\\/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\\\/echarts-playbook\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a66cd97ad629.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/07\\\/img_6a66cd97ad629.png\",\"width\":2119,\"height\":1392},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/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\":\"ECharts Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Theme River Chart: Continuous Categorical Flow and Trend Analysis\"}]},{\"@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\/echarts-playbook\/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\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-30T01:28:50+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/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\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/echarts-playbook\/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\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629.png","datePublished":"2026-07-27T03:14:24+00:00","dateModified":"2026-07-30T01:28:50+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\/echarts-playbook\/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\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/echarts-playbook\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/07\/img_6a66cd97ad629.png","width":2119,"height":1392},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/echarts-playbook\/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":"ECharts Playbook","item":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/echarts-playbook\/"},{"@type":"ListItem","position":4,"name":"Theme River Chart: Continuous Categorical Flow and Trend Analysis"}]},{"@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\/1389","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"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/1254"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=1389"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}