数据分组与聚合

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

数据分组与聚合是数据分析中常见的操作，通过将数据按照特定条件分组后对每组数据进行统计计算。ECharts作为强大的数据可视化库，提供了多种方式实现数据的分组与聚合展示。分组通常基于离散型变量，如地区、类别等；聚合则是对数值型数据进行求和、平均、计数等操作。

ECharts中的数据处理方式

ECharts支持在数据层面和视觉编码层面进行分组聚合。在option配置中，dataset.source可以直接使用原始数据，也可以通过series.encode指定维度映射。对于大数据量的场景，建议在数据传入ECharts前完成聚合运算，以获得更好的性能。

// 原始数据示例
const rawData = [
  { product: '苹果', category: '水果', sales: 1230 },
  { product: '香蕉', category: '水果', sales: 980 },
  { product: '胡萝卜', category: '蔬菜', sales: 560 }
];

// 在JavaScript中预先聚合
const aggregatedData = rawData.reduce((acc, curr) => {
  const found = acc.find(item => item.category === curr.category);
  if (found) {
    found.sales += curr.sales;
  } else {
    acc.push({ category: curr.category, sales: curr.sales });
  }
  return acc;
}, []);

使用dataset进行数据分组

dataset是ECharts推荐的数据管理方式，支持从多维数据中提取需要的维度进行展示。通过设置dimensions定义数据维度，再通过series.encode将维度映射到坐标系。

option = {
  dataset: {
    dimensions: ['product', 'category', 'sales'],
    source: rawData
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'bar',
      encode: {
        // 将category维度映射到x轴
        x: 'category',
        // 将sales维度映射到y轴
        y: 'sales',
        // 使用product作为tooltip显示
        tooltip: ['product', 'sales']
      }
    }
  ]
};

多系列分组展示

当需要比较不同分组的数据时，可以创建多个系列，每个系列对应一个数据分组。这种方式适合展示分组间的对比关系。

// 按category分组后的数据
const fruitData = rawData.filter(item => item.category === '水果');
const vegData = rawData.filter(item => item.category === '蔬菜');

option = {
  xAxis: {
    type: 'category',
    data: ['苹果', '香蕉', '胡萝卜']
  },
  yAxis: {},
  series: [
    {
      name: '水果',
      type: 'bar',
      data: fruitData.map(item => item.sales)
    },
    {
      name: '蔬菜',
      type: 'bar',
      data: vegData.map(item => item.sales)
    }
  ]
};

使用transform进行数据聚合

ECharts 5.0引入了transform功能，可以直接在配置中实现数据聚合，无需预先处理数据。这对于动态数据特别有用。

option = {
  dataset: [{
    source: rawData
  }, {
    transform: {
      type: 'aggregate',
      config: {
        groupBy: 'category',
        operations: [
          { type: 'sum', field: 'sales', dimension: 'sales' },
          { type: 'count', dimension: 'count' }
        ]
      }
    }
  }],
  xAxis: { type: 'category' },
  yAxis: {},
  series: {
    type: 'bar',
    datasetIndex: 1,
    encode: {
      x: 'category',
      y: 'sales'
    }
  }
};

复杂聚合场景处理

对于需要多层分组的复杂场景，可以结合多个transform操作。例如先按时间分组，再在每个时间组内按类别分组。

const timeSeriesData = [
  { date: '2023-01', category: '水果', sales: 1200 },
  { date: '2023-01', category: '蔬菜', sales: 800 },
  { date: '2023-02', category: '水果', sales: 1500 }
];

option = {
  dataset: [{
    source: timeSeriesData
  }, {
    transform: [{
      type: 'filter',
      config: { dimension: 'date', value: '2023-01' }
    }, {
      type: 'aggregate',
      config: {
        groupBy: 'category',
        operations: [{ type: 'sum', field: 'sales' }]
      }
    }]
  }],
  series: [
    {
      type: 'pie',
      datasetIndex: 1,
      radius: '50%',
      encode: {
        value: 'sales',
        itemName: 'category'
      }
    }
  ]
};

自定义聚合函数

当内置聚合操作不满足需求时，可以通过registerTransform注册自定义聚合函数。这种方式提供了极大的灵活性。

// 注册自定义聚合函数
echarts.registerTransform('average', function (ecModel, params) {
  const upstream = params.upstream;
  const result = [];
  
  // 实现自定义聚合逻辑
  // ...
  
  return {
    dimensions: ['category', 'avg_sales'],
    data: result
  };
});

option = {
  dataset: [{
    source: rawData
  }, {
    transform: {
      type: 'average',
      config: {
        groupBy: 'category',
        field: 'sales'
      }
    }
  }],
  // ...其他配置
};

交互式分组与聚合

ECharts支持通过交互动态改变分组维度。结合visualMap和dataZoom等组件，可以实现动态的数据探索。

option = {
  dataset: {
    source: rawData
  },
  visualMap: {
    type: 'continuous',
    dimension: 'sales',
    min: 0,
    max: 2000,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    // 通过visualMap筛选数据范围
    seriesIndex: 0
  },
  series: {
    type: 'scatter',
    encode: {
      x: 'category',
      y: 'sales'
    }
  }
};

大数据量的优化策略

当处理海量数据时，合理的分组聚合策略至关重要。可以考虑以下优化方法：

1. 在数据源端预先聚合
2. 使用采样减少数据点
3. 分块加载数据
4. 使用Web Worker进行后台计算

// 分块加载示例
function loadDataChunk(start, size) {
  return fetch(`/api/data?start=${start}&size=${size}`)
    .then(res => res.json());
}

let currentStart = 0;
const chunkSize = 1000;

loadDataChunk(currentStart, chunkSize).then(data => {
  myChart.setOption({
    dataset: { source: data }
  });
  
  // 滚动加载更多
  window.addEventListener('scroll', () => {
    if (nearBottom()) {
      currentStart += chunkSize;
      loadDataChunk(currentStart, chunkSize).then(moreData => {
        // 追加数据到现有dataset
      });
    }
  });
});

与后端服务的协作模式

在实际项目中，复杂的聚合计算通常在后端完成。前端ECharts主要关注数据展示和交互。合理的API设计可以提高效率。

// 获取聚合数据的API调用示例
async function fetchAggregatedData(params) {
  const response = await fetch('/api/aggregate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(params)
  });
  return response.json();
}

// 使用示例
fetchAggregatedData({
  dimensions: ['category', 'date'],
  measures: [
    { field: 'sales', ops: ['sum', 'avg'] },
    { field: 'profit', ops: ['sum'] }
  ],
  filters: [
    { field: 'date', op: '>=', value: '2023-01-01' }
  ]
}).then(data => {
  myChart.setOption({
    dataset: { source: data }
  });
});

常见可视化类型的聚合应用

不同图表类型适合展示不同形式的聚合数据：

1. 柱状图：比较不同组别的汇总值
2. 饼图：显示各组占比
3. 折线图：展示时间序列上的聚合趋势
4. 散点图：显示数据分布情况

// 折线图展示时间聚合示例
const timeData = [
  { date: '2023-01', sales: 1200 },
  { date: '2023-02', sales: 1800 },
  { date: '2023-03', sales: 1500 }
];

option = {
  xAxis: {
    type: 'category',
    data: timeData.map(item => item.date)
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: timeData.map(item => item.sales),
    smooth: true,
    markPoint: {
      data: [
        { type: 'max', name: '最大值' },
        { type: 'min', name: '最小值' }
      ]
    }
  }]
};

动态更新与动画效果

ECharts提供了丰富的数据更新动画，可以让分组聚合的变化过程更加直观。通过setOption的notMerge参数控制更新方式。

// 动态更新示例
let currentGroup = 'category';

function updateChart(groupBy) {
  const aggregated = aggregateData(rawData, groupBy);
  
  myChart.setOption({
    dataset: {
      source: aggregated
    },
    series: {
      encode: {
        x: groupBy,
        y: 'sales'
      }
    }
  }, true);
  
  currentGroup = groupBy;
}

// 定时切换分组维度
setInterval(() => {
  updateChart(currentGroup === 'category' ? 'product' : 'category');
}, 3000);

性能监控与调试

开发过程中需要关注分组聚合操作的性能。ECharts提供了getOption方法可以检查最终使用的数据，也可以通过performance工具监测渲染时间。

// 性能监测示例
console.time('chartRender');
myChart.setOption(option, true);
console.timeEnd('chartRender');

// 检查实际使用的数据
console.log(myChart.getOption().series[0].data);