{"id":2050,"date":"2026-07-27T03:14:24","date_gmt":"2026-07-27T03:14:24","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/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\/id\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","title":{"rendered":"Diagram Sungai Tema: Analisis Aliran Kategorikal Berkelanjutan dan Tren"},"content":{"rendered":"<p>Ketika melacak bagaimana beberapa kategori berkelanjutan berkembang seiring waktu\u2014seperti penjualan produk di setiap kuartal, tren topik yang berubah dalam liputan berita, atau pola konsumsi media\u2014maka<strong>Diagram Sungai Tema<\/strong> (bentuk khusus dari streamgraph) memberikan presentasi yang intuitif dan menarik secara visual. Berbeda dengan diagram area tumpuk standar yang menempel pada dasar datar, diagram Sungai Tema mengalir secara horizontal di sekitar sumbu pusat, menciptakan visualisasi yang organik seperti sungai, di mana aliran individu melebar atau menyempit berdasarkan perubahan nilai kuantitatif.<\/p>\n<h2>Mekanisme Diagram Sungai Tema<\/h2>\n<p>Dalam Apache ECharts, diagram Sungai Tema menggunakan<code>type: 'themeRiver'<\/code>. Alih-alih mengandalkan konfigurasi tradisional<code>xAxis<\/code> dan <code>yAxis<\/code>, diagram ini beroperasi pada satu sumbu horizontal<code>singleAxis<\/code> dengan <code>type: 'time'<\/code> atau <code>type: 'value'<\/code>. Item data dilewatkan sebagai tupel array yang diformat sebagai<code>[waktu, nilai, namaKategori]<\/code>.<\/p>\n<h3>1. Pengaturan Dasar<\/h3>\n<p>Untuk membuat diagram Sungai Tema dasar, konfigurasikan<code>singleAxis<\/code> jenis<code>'time'<\/code>, tentukan<code>type: 'themeRiver'<\/code> dalam seri Anda, dan berikan pengamatan aliran Anda dalam array<code>data<\/code> array:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVVMFOwzAMvSPxD7kFpDJ1GUOoiAMgcdoBAbdph2y1Wou0qZqMMaH+O0mXam06UHB7aJxn+8XPqaw0ypLck+\/zM2JMSyk0Vkm3bn01ZhnUCaH8CxWNjjt2\/SKx1Ha3F9FG7SswIQJL6IdYs743vRcwCrK2kULaYnW25hdx1D4TduknsbbDVOcJmZ7YcuWVFJjS4XZzXLrPxiUQkEGZDlilXPOELOk7bHIaEfrMVW46Zj\/fKllrRVfDHArLTMCD6cywidI0dR73mK6l1rLwnLaj77j5MLGN517wNQjP706psYBQXXiJBbeiJ0bYLfjSuCJE5XJ3QAz61YOrSqBeGClHJY6x\/xLeHSY1HYb0lNyy4hvU+4TEk3mopApqBCPF8og4Pag6hwJe8RNqvzQUVc6Vp2dnqKH4\/UiHbvBU7h7F1mjB4ugv0NNw9Il7J7NLOg5rvBZ4md3gjuOWlMXs5iqemteM8ZSZUW6nexX9DmYHMLsOAc8O4FlQ5mtH4zYE3HGe925iAO02eQjeMZ\/GgXhHnoXycfxve3+PAPYsDO7Is8DsHfd49CvrbDW6VcbT3P0AHUBKwg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><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><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\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\/editor\/#echarts:eNqVVMFOwzAMvSPxD7kFpDJ1GUNTEQdA4jQJBNymHbLVai3SpmoCY0L9d5ItVdd0Q8HtoXH84mc\/p7LSKEtyR37Oz4gxLaXQWCXteuerMcugTgjl36ho1O3Y9YvEUtvdA8QOta3AQASWcAixZn1veitgALK2lkLaZHW24hdxtHtG7NI\/xNoGU50nZHxky6VXUmBK+9tNt3SfjTtAQAZl2mOVcs0TsqDv8FEaYhnSiNAnUFso7dez4HnNM06X\/ZMUlpmAe9Offiulae00PuC7klrLwnPavr7j+sNgG8895ysQnt\/VqrGAUHV4iQW30idG3k\/wBXJJiMrlZh\/R69pBuKoE6rkRdJCiw\/5LfldMylUO6THRZcXXqLcJiUfTUGEV1AhGikUXcXxcdQ4FvOIX1H5qKKqcK0\/P1lBDcbqkfTd4KjcP4tNoweLor6DH\/gUg7h1NLukQ1ngt8E524zvELSiL2c1VPDavGeQxM8PczfgyOo1gewS7DkZM9ohJeI5rx2oWjGjrmHbXM6CIXYKAcFfBOA4Ld\/RZIBnHfdb7nwSQZ6EAR58FZ2gLiI\/84lpbDm6b8TS3vyjBVpg=\" \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 class=\"language-echarts\" 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: ['Teknologi', 'Fesyen', 'Olahraga']\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, 'Teknologi'],\r\n                ['2026-02-01', 24, 'Teknologi'],\r\n                ['2026-03-01', 32, 'Teknologi'],\r\n                ['2026-04-01', 18, 'Teknologi'],\r\n                ['2026-01-01', 15, 'Fesyen'],\r\n                ['2026-02-01', 18, 'Fesyen'],\r\n                ['2026-03-01', 10, 'Fesyen'],\r\n                ['2026-04-01', 25, 'Fesyen'],\r\n                ['2026-01-01', 8, 'Olahraga'],\r\n                ['2026-02-01', 12, 'Olahraga'],\r\n                ['2026-03-01', 28, 'Olahraga'],\r\n                ['2026-04-01', 20, 'Olahraga']\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\/editor\/#echarts:eNqVVMFOwzAMvSPxD7kFpDJ1GUNTEQdA4jQJBNymHbLVai3SpmoCY0L9d5ItVdd0Q8HtoXH84mc\/p7LSKEtyR37Oz4gxLaXQWCXteuerMcugTgjl36ho1O3Y9YvEUtvdA8QOta3AQASWcAixZn1veitgALK2lkLaZHW24hdxtHtG7NI\/xNoGU50nZHxky6VXUmBK+9tNt3SfjTtAQAZl2mOVcs0TsqDv8FEaYhnSiNAnUFso7dez4HnNM06X\/ZMUlpmAe9Offiulae00PuC7klrLwnPavr7j+sNgG8895ysQnt\/VqrGAUHV4iQW30idG3k\/wBXJJiMrlZh\/R69pBuKoE6rkRdJCiw\/5LfldMylUO6THRZcXXqLcJiUfTUGEV1AhGikUXcXxcdQ4FvOIX1H5qKKqcK0\/P1lBDcbqkfTd4KjcP4tNoweLor6DH\/gUg7h1NLukQ1ngt8E524zvELSiL2c1VPDavGeQxM8PczfgyOo1gewS7DkZM9ohJeI5rx2oWjGjrmHbXM6CIXYKAcFfBOA4Ld\/RZIBnHfdb7nwSQZ6EAR58FZ2gLiI\/84lpbDm6b8TS3vyjBVpg=\" \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><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqVVMFOwzAMvSPxD7kFpDJ1GUOoiAMgcdoBAbdph2y1Wou0qZqMMaH+O0mXam06UHB7aJxn+8XPqaw0ypLck+\/zM2JMSyk0Vkm3bn01ZhnUCaH8CxWNjjt2\/SKx1Ha3F9FG7SswIQJL6IdYs743vRcwCrK2kULaYnW25hdx1D4TduknsbbDVOcJmZ7YcuWVFJjS4XZzXLrPxiUQkEGZDlilXPOELOk7bHIaEfrMVW46Zj\/fKllrRVfDHArLTMCD6cywidI0dR73mK6l1rLwnLaj77j5MLGN517wNQjP706psYBQXXiJBbeiJ0bYLfjSuCJE5XJ3QAz61YOrSqBeGClHJY6x\/xLeHSY1HYb0lNyy4hvU+4TEk3mopApqBCPF8og4Pag6hwJe8RNqvzQUVc6Vp2dnqKH4\/UiHbvBU7h7F1mjB4ugv0NNw9Il7J7NLOg5rvBZ4md3gjuOWlMXs5iqemteM8ZSZUW6nexX9DmYHMLsOAc8O4FlQ5mtH4zYE3HGe925iAO02eQjeMZ\/GgXhHnoXycfxve3+PAPYsDO7Is8DsHfd49CvrbDW6VcbT3P0AHUBKwg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><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><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"sLHoUlY\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1391\" decoding=\"async\" fetchpriority=\"high\" height=\"1392\" sizes=\"(max-width: 2119px) 100vw, 2119px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629.png 2119w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629-300x197.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629-1024x673.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629-768x505.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629-1536x1009.png 1536w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66cd97ad629-2048x1345.png 2048w\" width=\"2119\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Teknik Struktural Lanjutan<\/h2>\n<p>Grafik Theme River sangat unggul saat memantau peristiwa multi-kategori yang kompleks selama urutan waktu panjang dengan tooltip khusus dan palet kategori yang diberi gaya.<\/p>\n<h3>1. Aliran Volume Media Multi-Stream<\/h3>\n<p>Menyesuaikan warna aliran dengan pemetaan palet yang eksplisit dan tooltip sumbu khusus mengubah log peristiwa mentah menjadi timeline aktivitas yang bersih:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFVE2L2zAQvQfyHwRh0WULlh3na+lhWXrrITSwl5CDVp44AsUK9rTZtOS\/d2wrH7K9jsjBGr158\/RmImWzApmSCKnNNRTsO1vz1xy1MlDwZ8bfdQKWvWs4VtulTZSkjKWRpyqwskpLw1Y7mVPC5mU4GA7sAbXNiOrfcMBooUYDi8uuisAnLhh\/sxlChuxHlsoU9uXnCnOQe6K+gQ1sS7CiY8h5HT+7c7TWoD745LlOU8gpRX5qj6ncL60uebyMKut0II3c6AzuUyoBFFvhqXGHy1LW2LLYKIqiZma5jjrB3YIJ\/+R82579KxlIIUu8UolEubjr0l2VD4to90Qf+CxO1ZqP4vE0UJOyV6O5UGoaV59bqWbxrPoEmNDiG5dZ6Cw18EpW+a5acpmL+Il3VOdh4MWdmaj30PT\/J5lJxJ6pNw+VUpydr7eo9ByMxktWsbPHBdtKU0DTtwJKa+jKt9TuFuOORu2X\/kPD1Gy0\/ADT2eS6Lua\/oaPDB1vocuLL8aFZ7RqCLU36Sv+l8iJsDEIDXfd63aZYk8nh5Fsg6Ed9E2FAzbv+VTfPV0BYA8LgK0DkGOKvAOMaMGucP9Q0CRovRluVGPdgnLAw7ME4bZFoYx7qi4LWE9ZWOI77QE7ivJfJaRSiC\/W4s5XvjYe1baToRTmd016Q0zmP2yBf5ab1WlHk\/PIfilp5hg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><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><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\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\/editor\/#echarts:eNqNVE2P2jAQvSPxHyKhyhcqxQnha9UDvbaVUKl6QRyMMwRrTYyS2e7Siv\/ecTALTgKsxSGeeTPz5s1gafISAykQMlMoKIMvwZLNClTPoFk\/YL\/EQeSZyIPfKgVjLfMXFAUZ5iaVokRr+ioy9UymH5AqESxMqYRmq6dup9sxe1Qmp6z\/up2ADirUMD3fKgu84TRgM61s1m+AUGi1FmgvJkfIWf8C1rCxYAnkKNjJfnR+NEaj2vvJC5VlUFCIeFPldSZ7nxtl83gRVdRhTxyZVjlch1QEyLbAQ62H85FGG1usF8dxPdKeV5Xidhpw33O8XI9+SxoyyFOvVErKTK8GdlVlbRDNjtKHfhbHasl6yWAUyqEdWW\/CpRwl1edGyHEyrj4BhnTYykWWKs80zEgqX1VDKjOefGIt1VkUenYnJqod1PX\/TmJSYk\/Ui4ZSShYc37uo+Oy1wnNUuTWv02AjdAl13Uqw0lDLl9D2EeMWdvBT\/aFlqg9arEG3DvlUF4sXaJnwnpbfbrxdH9rVtiXY0FYv1F8qz6PaItTQp1kvmymWJHI0\/Bxy+tHceBTS8M7\/2lX\/3R+d\/FF4wx+7+OSGf3Dyj333Qz7DsPlyNFnxwX2YIxdF92GOY8xbYQ+5xmHLm9YkO0juwxzZyYNsjizn7bjHk65G0f7eNgXmHwE75qOPYB39SXIT63ewarxsZDk+\/QdHtYzc\" \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 class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">const categories = ['Artikel', 'Tayangan Video', 'Putaran Podcast', 'Bagikan Media Sosial'];\r\n\r\noption = {\r\n    title: {\r\n        text: 'Aliran Keterlibatan Konten',\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, 'Artikel'], ['2026-02-01', 200, 'Artikel'], ['2026-03-01', 150, 'Artikel'], ['2026-04-01', 80, 'Artikel'],\r\n                ['2026-01-01', 60, 'Tayangan Video'], ['2026-02-01', 140, 'Tayangan Video'], ['2026-03-01', 220, 'Tayangan Video'], ['2026-04-01', 310, 'Tayangan Video'],\r\n                ['2026-01-01', 30, 'Putaran Podcast'], ['2026-02-01', 45, 'Putaran Podcast'], ['2026-03-01', 90, 'Putaran Podcast'], ['2026-04-01', 110, 'Putaran Podcast'],\r\n                ['2026-01-01', 180, 'Bagikan Media Sosial'], ['2026-02-01', 110, 'Bagikan Media Sosial'], ['2026-03-01', 70, 'Bagikan Media Sosial'], ['2026-04-01', 95, 'Bagikan Media Sosial']\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\/editor\/#echarts:eNqNVE2P2jAQvSPxHyKhyhcqxQnha9UDvbaVUKl6QRyMMwRrTYyS2e7Siv\/ecTALTgKsxSGeeTPz5s1gafISAykQMlMoKIMvwZLNClTPoFk\/YL\/EQeSZyIPfKgVjLfMXFAUZ5iaVokRr+ioy9UymH5AqESxMqYRmq6dup9sxe1Qmp6z\/up2ADirUMD3fKgu84TRgM61s1m+AUGi1FmgvJkfIWf8C1rCxYAnkKNjJfnR+NEaj2vvJC5VlUFCIeFPldSZ7nxtl83gRVdRhTxyZVjlch1QEyLbAQ62H85FGG1usF8dxPdKeV5Xidhpw33O8XI9+SxoyyFOvVErKTK8GdlVlbRDNjtKHfhbHasl6yWAUyqEdWW\/CpRwl1edGyHEyrj4BhnTYykWWKs80zEgqX1VDKjOefGIt1VkUenYnJqod1PX\/TmJSYk\/Ui4ZSShYc37uo+Oy1wnNUuTWv02AjdAl13Uqw0lDLl9D2EeMWdvBT\/aFlqg9arEG3DvlUF4sXaJnwnpbfbrxdH9rVtiXY0FYv1F8qz6PaItTQp1kvmymWJHI0\/Bxy+tHceBTS8M7\/2lX\/3R+d\/FF4wx+7+OSGf3Dyj333Qz7DsPlyNFnxwX2YIxdF92GOY8xbYQ+5xmHLm9YkO0juwxzZyYNsjizn7bjHk65G0f7eNgXmHwE75qOPYB39SXIT63ewarxsZDk+\/QdHtYzc\" \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><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqFVE2L2zAQvQfyHwRh0WULlh3na+lhWXrrITSwl5CDVp44AsUK9rTZtOS\/d2wrH7K9jsjBGr158\/RmImWzApmSCKnNNRTsO1vz1xy1MlDwZ8bfdQKWvWs4VtulTZSkjKWRpyqwskpLw1Y7mVPC5mU4GA7sAbXNiOrfcMBooUYDi8uuisAnLhh\/sxlChuxHlsoU9uXnCnOQe6K+gQ1sS7CiY8h5HT+7c7TWoD745LlOU8gpRX5qj6ncL60uebyMKut0II3c6AzuUyoBFFvhqXGHy1LW2LLYKIqiZma5jjrB3YIJ\/+R82579KxlIIUu8UolEubjr0l2VD4to90Qf+CxO1ZqP4vE0UJOyV6O5UGoaV59bqWbxrPoEmNDiG5dZ6Cw18EpW+a5acpmL+Il3VOdh4MWdmaj30PT\/J5lJxJ6pNw+VUpydr7eo9ByMxktWsbPHBdtKU0DTtwJKa+jKt9TuFuOORu2X\/kPD1Gy0\/ADT2eS6Lua\/oaPDB1vocuLL8aFZ7RqCLU36Sv+l8iJsDEIDXfd63aZYk8nh5Fsg6Ed9E2FAzbv+VTfPV0BYA8LgK0DkGOKvAOMaMGucP9Q0CRovRluVGPdgnLAw7ME4bZFoYx7qi4LWE9ZWOI77QE7ivJfJaRSiC\/W4s5XvjYe1baToRTmd016Q0zmP2yBf5ab1WlHk\/PIfilp5hg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><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><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZjDljZM\"><img alt=\"\" class=\"alignnone size-full wp-image-1392\" decoding=\"async\" height=\"1461\" sizes=\"(max-width: 2119px) 100vw, 2119px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ce50df472.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ce50df472.png 2119w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ce50df472-300x207.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ce50df472-1024x706.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ce50df472-768x530.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ce50df472-1536x1059.png 1536w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ce50df472-2048x1412.png 2048w\" width=\"2119\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Praktik Terbaik Strategis<\/h2>\n<ul>\n<li><strong>Format Tuple Data dengan Benar:<\/strong> Setiap entri dalam <code>data<\/code> array harus mengikuti urutan tepat <code>[tanggal, nilai, namaKategori]<\/code> agar ECharts dapat memotong dan mengumpulkan aliran berkelanjutan dengan benar.<\/li>\n<li><strong>Batasi Penyebaran Kategori:<\/strong> Pertahankan jumlah kategori yang berbeda antara 3 hingga 7. Terlalu banyak aliran membuat setiap pita menjadi sempit dan sulit dilacak di titik-titik waktu.<\/li>\n<li><strong>Manfaatkan <code>singleAxis<\/code> Penyesuaian Ukuran:<\/strong> Sesuaikan <code>atas<\/code> dan <code>bawah<\/code> pada <code>singleAxis<\/code> properti untuk mengontrol padding vertikal dan mencegah label aliran luar dari terpotong di tepi wadah.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ketika melacak bagaimana beberapa kategori berkelanjutan berkembang seiring waktu\u2014seperti penjualan produk di setiap kuartal, tren topik yang berubah dalam liputan berita, atau pola konsumsi media\u2014makaDiagram Sungai Tema (bentuk khusus dari streamgraph) memberikan presentasi yang intuitif dan menarik secara visual. Berbeda&#8230;<\/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-2050","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\/id\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\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\/id\/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=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/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\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diagram Sungai Tema: Analisis Aliran Kategorikal Berkelanjutan dan Tren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/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\/id\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","og_locale":"id_ID","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\/id\/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":{"Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/","url":"https:\/\/www.vpascode.com\/id\/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\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/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\/id\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/theme-river-chart-continuous-categorical-flow-and-trend-analysis-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/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\/id\/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\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Diagram Sungai Tema: Analisis Aliran Kategorikal Berkelanjutan dan Tren"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2050"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}