ECharts数据筛选与聚合怎么做

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助你轻松地在网页上创建各种图表。在 ECharts 中，数据筛选和聚合通常是通过处理原始数据来实现的，然后再将处理后的数据传递给 ECharts 进行可视化。

以下是一个简单的示例，展示了如何在 ECharts 中进行数据筛选和聚合：

1. 首先，准备原始数据。这里我们以一个包含销售数据的数组为例：

const rawData = [
  { date: '2021-01-01', category: 'A', value: 100 },
  { date: '2021-01-01', category: 'B', value: 200 },
  { date: '2021-01-02', category: 'A', value: 150 },
  { date: '2021-01-02', category: 'B', value: 300 },
  // ...
];

2. 对原始数据进行筛选和聚合。在这个例子中，我们将按类别（category）对数据进行聚合，并计算每个类别的总和：

const aggregatedData = rawData.reduce((acc, item) => {
  const key = `${item.date}-${item.category}`;
  if (!acc[key]) {
    acc[key] = { date: item.date, category: item.category, value: 0 };
  }
  acc[key].value += item.value;
  return acc;
}, {});

3. 将聚合后的数据转换为 ECharts 可以使用的格式：

const formattedData = Object.values(aggregatedData);

4. 创建一个 ECharts 实例并设置相关配置：

const myChart = echarts.init(document.getElementById('main'));

const option = {
  xAxis: {
    type: 'category',
    data: formattedData.map(item => item.date),
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: formattedData.map(item => item.value),
      type: 'bar',
    },
  ],
};

5. 使用配置好的选项渲染图表：

myChart.setOption(option);

这个示例展示了如何对原始数据进行筛选和聚合，然后使用 ECharts 创建一个柱状图。你可以根据自己的需求调整数据处理和图表配置。