数据分组与聚合

数据分组与聚合的基本概念

数据分组与聚合是数据分析中常见的操作，主要用于将数据集按照特定条件划分为若干组，然后对每组数据进行统计计算。分组通常基于一个或多个键（key），聚合则是应用函数（如求和、平均值、计数等）到每个组的数据上。在ECharts中，这些操作能帮助我们从原始数据中提取有意义的信息，并以可视化形式展现。

例如，有一组销售数据，包含产品类别、销售额和地区等信息。通过分组聚合，可以快速得到每个产品类别的总销售额，或每个地区的平均销售额。这种处理方式在制作柱状图、饼图等图表时尤为有用。

ECharts中的数据处理方式

ECharts本身不直接提供数据分组与聚合的功能，但可以通过JavaScript的数组方法（如reduce、filter、map）或第三方库（如Lodash）预处理数据，再将结果传递给ECharts进行渲染。以下是一个简单的分组聚合示例：

const salesData = [
  { category: '电子产品', sales: 1500, region: '华东' },
  { category: '服装', sales: 800, region: '华北' },
  { category: '电子产品', sales: 2000, region: '华南' },
  { category: '食品', sales: 500, region: '华东' },
  { category: '服装', sales: 1200, region: '华东' }
];

// 按产品类别分组并计算总销售额
const groupedData = salesData.reduce((acc, item) => {
  if (!acc[item.category]) {
    acc[item.category] = 0;
  }
  acc[item.category] += item.sales;
  return acc;
}, {});

// 转换为ECharts需要的格式
const chartData = Object.keys(groupedData).map(key => ({
  name: key,
  value: groupedData[key]
}));

// ECharts配置
option = {
  series: [{
    type: 'pie',
    data: chartData
  }]
};

多维度分组与聚合

实际场景中可能需要按多个字段分组。例如，同时按产品类别和地区分组，计算每个组合的总销售额。这时可以使用嵌套的reduce或结合groupBy方法实现：

import _ from 'lodash';

// 使用Lodash的groupBy实现多维度分组
const multiGrouped = _.chain(salesData)
  .groupBy(item => `${item.category}-${item.region}`)
  .mapValues(group => _.sumBy(group, 'sales'))
  .value();

// 转换为ECharts需要的格式
const multiChartData = Object.keys(multiGrouped).map(key => {
  const [category, region] = key.split('-');
  return {
    category,
    region,
    sales: multiGrouped[key]
  };
});

// 生成堆叠柱状图数据
option = {
  xAxis: { type: 'category', data: [...new Set(multiChartData.map(d => d.region))] },
  yAxis: { type: 'value' },
  series: _.chain(multiChartData)
    .groupBy('category')
    .map((group, name) => ({
      name,
      type: 'bar',
      stack: 'total',
      data: group.map(item => item.sales)
    }))
    .value()
};

时间序列数据的处理

对于时间序列数据（如按天/月/年统计），通常需要先将时间字段转换为统一粒度，再进行分组聚合。以下示例展示如何按月份聚合销售数据：

const timeSalesData = [
  { date: '2023-01-15', sales: 200 },
  { date: '2023-01-20', sales: 300 },
  { date: '2023-02-05', sales: 150 },
  { date: '2023-02-18', sales: 400 }
];

// 提取月份作为分组键
const monthlySales = timeSalesData.reduce((acc, item) => {
  const month = item.date.substring(0, 7); // 获取YYYY-MM
  acc[month] = (acc[month] || 0) + item.sales;
  return acc;
}, {});

// 生成折线图数据
option = {
  xAxis: {
    type: 'category',
    data: Object.keys(monthlySales).sort()
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: Object.keys(monthlySales).sort().map(key => monthlySales[key])
  }]
};

高级聚合函数应用

除了基本的求和、计数外，还可以实现更复杂的聚合逻辑，如计算移动平均、百分比占比等。以下示例计算各产品类别的销售额占比：

const totalSales = _.sumBy(salesData, 'sales');
const percentageData = salesData.map(item => ({
  ...item,
  percentage: (item.sales / totalSales * 100).toFixed(2) + '%'
}));

// 在tooltip中显示百分比
option = {
  tooltip: {
    formatter: params => {
      const data = percentageData.find(d => d.category === params.name);
      return `${params.name}<br/>销售额: ${params.value}<br/>占比: ${data.percentage}`;
    }
  },
  series: [{
    type: 'pie',
    data: chartData
  }]
};

大数据量的优化策略

当处理大规模数据集时，直接在前端进行分组聚合可能影响性能。可以考虑以下优化方案：

1. Web Worker：将计算任务放到后台线程
2. 抽样显示：对原始数据进行抽样
3. 分页加载：分批处理数据
4. 使用TypedArray：提高数值计算效率

// Web Worker示例
const worker = new Worker('data-worker.js');
worker.postMessage({ action: 'groupBy', data: largeDataSet });
worker.onmessage = (e) => {
  const groupedData = e.data;
  // 更新图表
};

与ECharts数据集（dataset）结合

ECharts的dataset组件支持声明式数据绑定，可以更方便地实现数据转换：

option = {
  dataset: [{
    source: salesData
  }, {
    transform: {
      type: 'filter',
      config: { dimension: 'category', eq: '电子产品' }
    }
  }],
  series: [{
    type: 'pie',
    datasetIndex: 1  // 使用过滤后的数据
  }]
};

动态聚合与交互

通过ECharts的事件系统和动态数据更新，可以实现交互式分组聚合。例如在下拉框选择分组维度后实时更新图表：

function updateChart(groupByKey) {
  const newData = _.chain(salesData)
    .groupBy(groupByKey)
    .mapValues(group => _.sumBy(group, 'sales'))
    .map((value, key) => ({ name: key, value }))
    .value();
  
  myChart.setOption({
    series: [{ data: newData }]
  });
}

// 绑定下拉框事件
document.getElementById('group-select').addEventListener('change', (e) => {
  updateChart(e.target.value);
});