什么是主题河流图

主题河流图（Theme River Chart）是Echarts中的一种数据可视化图表类型，它主要用于展示一段时间内多个主题（或类别）的数据变化趋势和相互之间的关系。

主题河流图通常由多个平行的流（或带状区块）组成，每个流表示一个主题，并沿着时间轴在垂直方向上堆叠排列。每个流的宽度代表该主题在对应时间段内的数值大小，主题之间的颜色渐变表示它们之间的关系。

通过主题河流图，可以直观地比较不同主题在时间上的变化趋势和相对大小，同时也可以观察到主题之间的相对重要程度和相似性。它在展示复杂数据时可以帮助用户发现数据背后的模式和规律，并表达多个主题之间的相互影响。

Echarts是一个基于JavaScript的开源数据可视化库，提供了丰富的图表类型和灵活的配置选项，使开发者可以轻松地创建各种交互式图表，包括主题河流图。您可以通过Echarts官方文档了解如何使用主题河流图以及其他图表类型。

Echarts主题河流图的特点和应用场景

Echarts主题河流图的特点

可视化多个主题间的变化趋势：主题河流图通过流的堆叠和宽度来展示多个主题在时间上的变化趋势，帮助用户直观地比较不同主题的数据。
可视化主题之间的关系：主题河流图通过颜色渐变来表示主题之间的关系。相似的主题会使用相似的颜色，使用户能够看出主题之间的相对重要程度和相似性。

Echarts主题河流图的应用场景

趋势分析：主题河流图可以用来展示多个主题的变化趋势，例如不同产品的销量、不同地区的人口数量等。通过比较和观察趋势，可以帮助用户了解数据的发展情况和变化趋势。
影响因素分析：主题河流图可以用来分析多个主题之间的关系和相互影响。通过观察流的宽度和颜色渐变，可以了解不同因素对目标主题的影响程度，从而帮助用户识别关键因素和制定相应策略。
比较分析：主题河流图可以用来比较不同主题的数值大小和相对重要程度。通过观察流的宽度和堆叠顺序，可以快速了解多个主题之间的相对差距，从而进行有针对性的比较分析。
复杂数据展示：主题河流图适用于展示多个主题的复杂数据。通过将不同主题的数据以流的形式展示，可以清晰地表达各主题之间的关系和演变过程，帮助用户更好地理解数据背后的模式和规律。
时间序列分析：主题河流图可以展示一段时间内多个主题的动态变化。通过观察流的堆叠和颜色变化，可以观察到不同主题在不同时期的变化趋势和相对大小，有助于时间序列的分析和解读。

Echarts中主题河流图的常用配置项

title: 定义图表的标题，包括文本内容、样式、位置等。

title: {
    text: '主题河流图示例',
    left: 'center',
    top: 'top',
    textStyle: {
        color: '#333',
        fontSize: 24
    }
}

tooltip: 配置提示框组件，包括触发类型、格式化等。

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'line',
        lineStyle: {
            color: 'rgba(0,0,0,0.2)',
            width: 1,
            type: 'solid'
        }
    },
    formatter: function (params) {
        // 格式化提示框内容
    }
}

legend: 定义图例组件，包括图例的数据、位置、样式等。

legend: {
    data: ['主题1', '主题2', '主题3'],
    top: 'bottom',
    textStyle: {
        color: '#333'
    }
}

singleAxis: 配置单轴组件，包括类型、位置、刻度等。

singleAxis: {
    top: 50,
    bottom: 50,
    axisTick: {
        show: true
    },
    axisLine: {
        show: true
    },
    type: 'time',
    axisPointer: {
        animation: true,
        label: {
            show: true
        }
    },
    splitLine: {
        show: true,
        lineStyle: {
            type: 'dashed',
            opacity: 0.2
        }
    }
}

series: 定义系列列表，包括类型、数据、样式等,主题河流图，将series中的type设置为"themeRiver"。

series: [{
      type: 'themeRiver',

      data: seriesData,
      splitNumber: 30,
      label: {
        show: false
      }
    }]

grid: 用于配置图表布局，包括位置、大小等。

grid: {
    left: '10%',
    right: '10%',
    top: '10%',
    bottom: '10%',
    containLabel: true
}

color: 定义图表的颜色，可以自定义数据系列的颜色。

color: ['#5470C6', '#EE6666', '#9EAA56']

backgroundColor: 配置图表的背景颜色。

backgroundColor: 'rgba(255, 255, 255, 0.8)'

animation: 是否开启动画以及动画相关配置。

animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut'

vue3中创建主题河流图

创建vue项目，安装ECharts库

npm install echarts --save

新建ThemeRiver.vue文件，使用import语句引入ECharts库

import * as echarts from 'echarts';

创建图表容器：在ThemeRiver组件的template中，添加一个div元素作为图表的容器。给它一个唯一的ref属性，以便在后面初始化图表对象时使用

<template>
   <div ref="chart" style="width:600px;height:400px; margin: 20px auto;"></div>
</template>

初始化图表对象：在ThemeRiver组件中定义chart，

const chart = ref(null)

在mounted生命周期钩子函数中，使用echarts.init方法初始化图表对象。

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
onMounted(() => {
  const myChart = echarts.init(chart.value) 
})
</script>

5.准备数据，实际项目开发中，这里的数据应该是从后台的API接口获取的，这里直接写在了前端。

const legendData = ['HTML', 'Vue', 'JQuery', 'Python', 'Go', 'C++', 'dotNet', 'PHP', 'Threejs'];
const seriesData = [
  ['2023/01/17', 22, 'HTML'],
  ['2023/01/18', 2, 'JavaScript'],
  ['2023/01/19', 10, 'JavaScript'],
  ['2023/01/20', 45, 'JavaScript'],
  ['2023/01/21', 60, 'JavaScript'],
  ['2023/01/22', 31, 'JavaScript'],
  ['2023/01/23', 30, 'JavaScript'],
  ['2023/01/24', 41, 'JavaScript'],
  ['2023/01/25', 25, 'JavaScript'],
  ['2023/01/26', 28, 'JavaScript'],
  ['2023/01/27', 5, 'JavaScript'],
  ['2023/01/28', 51, 'JavaScript'],
  ['2023/01/29', 41, 'JavaScript'],
  ['2023/01/30', 63, 'JavaScript'],
  ['2023/01/31', 41, 'JavaScript'],
  ['2023/02/01', 31, 'JavaScript'],
  ['2023/02/02', 22, 'JavaScript'],
  ['2023/02/03', 24, 'JavaScript'],
  ['2023/02/04', 45, 'JavaScript'],
  ['2023/02/05', 93, 'JavaScript'],
  ['2023/02/06', 37, 'JavaScript'],
  ['2023/02/07', 23, 'JavaScript'],
  ['2023/02/08', 32, 'JavaScript'],
  ['2023/02/09', 14, 'JavaScript'],
  ['2023/02/10', 16, 'JavaScript'],
  ['2023/02/11', 17, 'JavaScript'],
  ['2023/02/12', 41, 'JavaScript'],
  ['2023/02/13', 18, 'JavaScript'],
  ['2023/02/14', 51, 'JavaScript'],
  ['2023/02/15', 8, 'JavaScript'],
  ['2023/01/17', 24, 'Vue'],
  ['2023/01/18', 4, 'Vue'],
  ['2023/01/19', 3, 'Vue'],
  ['2023/01/20', 35, 'Vue'],
  ['2023/01/21', 43, 'Vue'],
  ['2023/01/22', 31, 'Vue'],
  ['2023/01/23', 33, 'Vue'],
  ['2023/01/24', 21, 'Vue'],
  ['2023/01/25', 26, 'Vue'],
  ['2023/01/26', 9, 'Vue'],
  ['2023/01/27', 8, 'Vue'],
  ['2023/01/28', 8, 'Vue'],
  ['2023/01/29', 8, 'Vue'],
  ['2023/01/30', 11, 'Vue'],
  ['2023/01/31', 26, 'Vue'],
  ['2023/02/01', 23, 'Vue'],
  ['2023/02/02', 17, 'Vue'],
  ['2023/02/03', 32, 'Vue'],
  ['2023/02/04', 29, 'Vue'],
  ['2023/02/05', 28, 'Vue'],
  ['2023/02/06', 32, 'Vue'],
  ['2023/02/07', 22, 'Vue'],
  ['2023/02/08', 23, 'Vue'],
  ['2023/02/09', 12, 'Vue'],
  ['2023/02/10', 21, 'Vue'],
  ['2023/02/11', 20, 'Vue'],
  ['2023/02/12', 48, 'Vue'],
  ['2023/02/13', 41, 'Vue'],
  ['2023/02/14', 69, 'Vue'],
  ['2023/02/15', 9, 'Vue'],
  ['2023/01/17', 269, 'JQuery'],
  ['2023/01/18', 89, 'JQuery'],
  ['2023/01/19', 123, 'JQuery'],
  ['2023/01/20', 475, 'JQuery'],
  ['2023/01/21', 1639, 'JQuery'],
  ['2023/01/22', 1500, 'JQuery'],
  ['2023/01/23', 1389, 'JQuery'],
  ['2023/01/24', 1154, 'JQuery'],
  ['2023/01/25', 1143, 'JQuery'],
  ['2023/01/26', 1060, 'JQuery'],
  ['2023/01/27', 313, 'JQuery'],
  ['2023/01/28', 449, 'JQuery'],
  ['2023/01/29', 520, 'JQuery'],
  ['2023/01/30', 618, 'JQuery'],
  ['2023/01/31', 752, 'JQuery'],
  ['2023/02/01', 815, 'JQuery'],
  ['2023/02/02', 1109, 'JQuery'],
  ['2023/02/03', 975, 'JQuery'],
  ['2023/02/04', 1301, 'JQuery'],
  ['2023/02/05', 1183, 'JQuery'],
  ['2023/02/06', 1323, 'JQuery'],
  ['2023/02/07', 1791, 'JQuery'],
  ['2023/02/08', 1585, 'JQuery'],
  ['2023/02/09', 1775, 'JQuery'],
  ['2023/02/10', 1956, 'JQuery'],
  ['2023/02/11', 2392, 'JQuery'],
  ['2023/02/12', 1098, 'JQuery'],
  ['2023/02/13', 240, 'JQuery'],
  ['2023/02/14', 171, 'JQuery'],
  ['2023/02/15', 69, 'JQuery'],
  ['2023/01/17', 111, 'Python'],
  ['2023/01/18', 20, 'Python'],
  ['2023/01/19', 15, 'Python'],
  ['2023/01/20', 99, 'Python'],
  ['2023/01/21', 154, 'Python'],
  ['2023/01/22', 96, 'Python'],
  ['2023/01/23', 52, 'Python'],
  ['2023/01/24', 28, 'Python'],
  ['2023/01/25', 55, 'Python'],
  ['2023/01/26', 14, 'Python'],
  ['2023/01/27', 3, 'Python'],
  ['2023/01/28', 19, 'Python'],
  ['2023/01/29', 13, 'Python'],
  ['2023/01/30', 19, 'Python'],
  ['2023/01/31', 25, 'Python'],
  ['2023/02/01', 37, 'Python'],
  ['2023/02/02', 63, 'Python'],
  ['2023/02/03', 25, 'Python'],
  ['2023/02/04', 67, 'Python'],
  ['2023/02/05', 32, 'Python'],
  ['2023/02/06', 25, 'Python'],
  ['2023/02/07', 26, 'Python'],
  ['2023/02/08', 36, 'Python'],
  ['2023/02/09', 22, 'Python'],
  ['2023/02/10', 22, 'Python'],
  ['2023/02/11', 73, 'Python'],
  ['2023/02/12', 73, 'Python'],
  ['2023/02/13', 38, 'Python'],
  ['2023/02/14', 44, 'Python'],
  ['2023/02/15', 1, 'Python'],
  ['2023/01/17', 244, 'Go'],
  ['2023/01/18', 27, 'Go'],
  ['2023/01/19', 45, 'Go'],
  ['2023/01/20', 117, 'Go'],
  ['2023/01/21', 142, 'Go'],
  ['2023/01/22', 102, 'Go'],
  ['2023/01/23', 89, 'Go'],
  ['2023/01/24', 67, 'Go'],
  ['2023/01/25', 102, 'Go'],
  ['2023/01/26', 85, 'Go'],
  ['2023/01/27', 30, 'Go'],
  ['2023/01/28', 49, 'Go'],
  ['2023/01/29', 102, 'Go'],
  ['2023/01/30', 68, 'Go'],
  ['2023/01/31', 90, 'Go'],
  ['2023/02/01', 90, 'Go'],
  ['2023/02/02', 94, 'Go'],
  ['2023/02/03', 67, 'Go'],
  ['2023/02/04', 120, 'Go'],
  ['2023/02/05', 86, 'Go'],
  ['2023/02/06', 115, 'Go'],
  ['2023/02/07', 94, 'Go'],
  ['2023/02/08', 117, 'Go'],
  ['2023/02/09', 94, 'Go'],
  ['2023/02/10', 78, 'Go'],
  ['2023/02/11', 46, 'Go'],
  ['2023/02/12', 337, 'Go'],
  ['2023/02/13', 374, 'Go'],
  ['2023/02/14', 432, 'Go'],
  ['2023/02/15', 98, 'Go'],
  ['2023/01/17', 7, 'C++'],
  ['2023/01/18', 4, 'C++'],
  ['2023/01/19', 4, 'C++'],
  ['2023/01/20', 13, 'C++'],
  ['2023/01/21', 11, 'C++'],
  ['2023/01/22', 10, 'C++'],
  ['2023/01/23', 15, 'C++'],
  ['2023/01/24', 6, 'C++'],
  ['2023/01/25', 3, 'C++'],
  ['2023/01/26', 8, 'C++'],
  ['2023/01/27', 4, 'C++'],
  ['2023/01/28', 7, 'C++'],
  ['2023/01/29', 5, 'C++'],
  ['2023/01/30', 0, 'C++'],
  ['2023/01/31', 7, 'C++'],
  ['2023/02/01', 6, 'C++'],
  ['2023/02/02', 3, 'C++'],
  ['2023/02/03', 7, 'C++'],
  ['2023/02/04', 12, 'C++'],
  ['2023/02/05', 3, 'C++'],
  ['2023/02/06', 4, 'C++'],
  ['2023/02/07', 5, 'C++'],
  ['2023/02/08', 15, 'C++'],
  ['2023/02/09', 6, 'C++'],
  ['2023/02/10', 1, 'C++'],
  ['2023/02/11', 9, 'C++'],
  ['2023/02/12', 37, 'C++'],
  ['2023/02/13', 22, 'C++'],
  ['2023/02/14', 44, 'C++'],
  ['2023/02/15', 2, 'C++'],
  ['2023/01/17', 65, 'dotNet'],
  ['2023/01/18', 4, 'dotNet'],
  ['2023/01/19', 9, 'dotNet'],
  ['2023/01/20', 25, 'dotNet'],
  ['2023/01/21', 38, 'dotNet'],
  ['2023/01/22', 34, 'dotNet'],
  ['2023/01/23', 36, 'dotNet'],
  ['2023/01/24', 28, 'dotNet'],
  ['2023/01/25', 17, 'dotNet'],
  ['2023/01/26', 9, 'dotNet'],
  ['2023/01/27', 4, 'dotNet'],
  ['2023/01/28', 6, 'dotNet'],
  ['2023/01/29', 22, 'dotNet'],
  ['2023/01/30', 28, 'dotNet'],
  ['2023/01/31', 10, 'dotNet'],
  ['2023/02/01', 51, 'dotNet'],
  ['2023/02/02', 36, 'dotNet'],
  ['2023/02/03', 28, 'dotNet'],
  ['2023/02/04', 28, 'dotNet'],
  ['2023/02/05', 14, 'dotNet'],
  ['2023/02/06', 22, 'dotNet'],
  ['2023/02/07', 25, 'dotNet'],
  ['2023/02/08', 49, 'dotNet'],
  ['2023/02/09', 24, 'dotNet'],
  ['2023/02/10', 12, 'dotNet'],
  ['2023/02/11', 21, 'dotNet'],
  ['2023/02/12', 77, 'dotNet'],
  ['2023/02/13', 53, 'dotNet'],
  ['2023/02/14', 91, 'dotNet'],
  ['2023/02/15', 7, 'dotNet'],
  ['2023/01/17', 83, 'PHP'],
  ['2023/01/18', 23, 'PHP'],
  ['2023/01/19', 10, 'PHP'],
  ['2023/01/20', 124, 'PHP'],
  ['2023/01/21', 170, 'PHP'],
  ['2023/01/22', 126, 'PHP'],
  ['2023/01/23', 70, 'PHP'],
  ['2023/01/24', 65, 'PHP'],
  ['2023/01/25', 67, 'PHP'],
  ['2023/01/26', 46, 'PHP'],
  ['2023/01/27', 10, 'PHP'],
  ['2023/01/28', 40, 'PHP'],
  ['2023/01/29', 18, 'PHP'],
  ['2023/01/30', 23, 'PHP'],
  ['2023/01/31', 36, 'PHP'],
  ['2023/02/01', 43, 'PHP'],
  ['2023/02/02', 75, 'PHP'],
  ['2023/02/03', 58, 'PHP'],
  ['2023/02/04', 67, 'PHP'],
  ['2023/02/05', 82, 'PHP'],
  ['2023/02/06', 115, 'PHP'],
  ['2023/02/07', 83, 'PHP'],
  ['2023/02/08', 68, 'PHP'],
  ['2023/02/09', 88, 'PHP'],
  ['2023/02/10', 54, 'PHP'],
  ['2023/02/11', 60, 'PHP'],
  ['2023/02/12', 323, 'PHP'],
  ['2023/02/13', 226, 'PHP'],
  ['2023/02/14', 323, 'PHP'],
  ['2023/02/15', 83, 'PHP'],
  ['2023/01/17', 472, 'Threejs'],
  ['2023/01/18', 114, 'Threejs'],
  ['2023/01/19', 72, 'Threejs'],
  ['2023/01/20', 112, 'Threejs'],
  ['2023/01/21', 259, 'Threejs'],
  ['2023/01/22', 153, 'Threejs'],
  ['2023/01/23', 106, 'Threejs'],
  ['2023/01/24', 89, 'Threejs'],
  ['2023/01/25', 89, 'Threejs'],
  ['2023/01/26', 109, 'Threejs'],
  ['2023/01/27', 24, 'Threejs'],
  ['2023/01/28', 38, 'Threejs'],
  ['2023/01/29', 55, 'Threejs'],
  ['2023/01/30', 60, 'Threejs'],
  ['2023/01/31', 60, 'Threejs'],
  ['2023/02/01', 68, 'Threejs'],
  ['2023/02/02', 107, 'Threejs'],
  ['2023/02/03', 91, 'Threejs'],
  ['2023/02/04', 123, 'Threejs'],
  ['2023/02/05', 89, 'Threejs'],
  ['2023/02/06', 87, 'Threejs'],
  ['2023/02/07', 94, 'Threejs'],
  ['2023/02/08', 110, 'Threejs'],
  ['2023/02/09', 112, 'Threejs'],
  ['2023/02/10', 139, 'Threejs'],
  ['2023/02/11', 83, 'Threejs'],
  ['2023/02/12', 336, 'Threejs'],
  ['2023/02/13', 386, 'Threejs'],
  ['2023/02/14', 542, 'Threejs'],
  ['2023/02/15', 104, 'Threejs']
];

配置图表参数，在ThemeRiver组件的mounted生命周期钩子函数中，定义option对象，在里面配置图表数据，并使用chart.setOption方法配置图表的参数。

onMounted(() => {
  const myChart = echarts.init(chart.value)
    const option = {
    grid: {
      left: '10%',
      right: '10%',
      top: '10%',
      bottom: '10%',
      containLabel: true
    },
    title: {
      text: '平台各模块访问量',
      subtext: '',
      x: 'center',
      y: 'bottom',
      textStyle: {
        color: '#333',
        fontSize: 24
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(0,0,0,0.2)',
          width: 1,
          type: 'solid'
        }
      },
      textStyle: {
        align: 'left'
      }

    },
    legend: {
      data: legendData,
      textStyle: {
        color: '#333'
      }
    },
    singleAxis: {
      top: '30%',
      bottom: '15%', 
      axisTick: {
        show: true
      },
      axisLine: {
        show: true
      },
      type: 'time',
      axisPointer: {
        animation: true,
        label: {
          show: true
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          opacity: 0.2
        }
      }
    },
    series: [{
      type: 'themeRiver',
      data: seriesData,
      splitNumber: 30,
      label: {
        show: false
      }
    }]
  }
  myChart.setOption(option)
})

运行程序，刷新浏览器，看下效果
在这里插入图片描述

OK，关于Echarts主题河流图的相关内容就介绍到这里，有问题的小伙伴可以在评论区留言，喜欢的小伙伴点赞关注加收藏哦！你也可以通过微信公众号搜索“九仞山”关注我，获取更多内容！

极致呈现系列之：Echarts主题河流图的绚丽世界

目录