如何用Apache ECharts按年/月聚合展示数值求和数据？

一、数据聚合处理 #

首先需要将原始带时间戳的数据按「年/月」分组，对每组的value字段求和。可以通过JavaScript的reduce方法高效完成这个过程：

1. 定义原始数据 #

const rawData = [
  {timestamp:"2021-04-09 10:18:48",value:18,id:1},
  {timestamp:"2021-04-09 10:18:49",value:102,id:2},
  {timestamp:"2021-04-09 10:18:53",value:23,id:3},
  {timestamp:"2021-05-10 10:19:07",value:63,id:4},
  {timestamp:"2021-05-10 10:23:16",value:131,id:5},
  {timestamp:"2021-05-10 10:33:59",value:92,id:6},
  {timestamp:"2021-06-11 10:34:16",value:101,id:7},
  {timestamp:"2021-06-11 10:47:50",value:19,id:8},
  {timestamp:"2021-06-11 10:18:43",value:89,id:9},
];

2. 聚合逻辑实现 #

// 按「年/月」分组求和
const aggregatedResult = rawData.reduce((acc, item) => {
  // 从时间戳中提取年/月部分，转换为「年/月」格式
  const yearMonth = item.timestamp.slice(0, 7).replace('-', '/');
  // 累加对应月份的数值
  acc[yearMonth] = (acc[yearMonth] || 0) + item.value;
  return acc;
}, {});

// 转换为ECharts兼容的两种格式：
// 格式1：拆分x轴分类和y轴数值数组
const xAxisData = Object.keys(aggregatedResult);
const yAxisData = Object.values(aggregatedResult);

// 格式2：直接生成包含name和value的系列数据数组
const seriesData = Object.entries(aggregatedResult).map(([name, value]) => ({ name, value }));

3. 可选：按时间排序 #

如果原始数据的时间顺序混乱，聚合后需要保证x轴按时间递增排序，可以添加以下代码：

// 将聚合结果按年/月时间排序
const sortedEntries = Object.entries(aggregatedResult).sort((a, b) => {
  return new Date(a[0].replace('/', '-')) - new Date(b[0].replace('/', '-'));
});

// 更新排序后的x轴和y轴数据
const sortedXData = sortedEntries.map(item => item[0]);
const sortedYData = sortedEntries.map(item => item[1]);

二、Apache ECharts配置与展示 #

以下是一个完整的柱状图示例，展示各年/月的数值求和结果：

<!-- 引入ECharts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<!-- 图表容器 -->
<div id="monthlySumChart" style="width: 800px; height: 500px;"></div>

<script>
// 这里放入前面的原始数据、聚合及排序代码

// 初始化图表
const chart = echarts.init(document.getElementById('monthlySumChart'));

// 配置项
const option = {
  title: {
    text: '各年/月数值求和统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b}: {c}' // 自定义提示框内容：年/月 + 求和值
  },
  xAxis: {
    type: 'category',
    data: sortedXData, // 使用排序后的x轴数据
    axisLabel: {
      fontSize: 12
    }
  },
  yAxis: {
    type: 'value',
    name: '数值总和',
    nameTextStyle: {
      fontSize: 14
    }
  },
  series: [
    {
      name: '数值总和',
      type: 'bar',
      data: sortedYData, // 使用排序后的y轴数据
      itemStyle: {
        color: '#5470c6'
      },
      label: {
        show: true,
        position: 'top',
        fontSize: 12
      }
    }
  ]
};

// 渲染图表
chart.setOption(option);

// 自适应窗口大小变化
window.addEventListener('resize', () => {
  chart.resize();
});
</script>

关键说明 #

• 时间戳处理：通过slice(0,7)截取时间戳的前7位（如2021-04），再用replace('-', '/')转换为用户需要的「年/月」格式。
• 聚合效率：使用reduce方法仅需遍历一次原始数据，时间复杂度为O(n)，适合处理大规模数据。
• ECharts适配：支持两种数据格式，可根据实际需求选择拆分的x/y数组或包含name/value的对象数组。

内容的提问来源于stack exchange，提问作者tytx t