Echarts图表如何进行数据筛选

ECharts 数据筛选的常用方式

• 前端内存过滤 + setOption：在内存中对原始数据进行过滤或排序，然后调用 chart.setOption(option) 更新图表。适合条件简单、数据量中小、交互频繁的场景。
• dataset + transform：使用 dataset 管理数据，声明 transform: { type: ‘filter’ } 或 transform: { type: ‘sort’ } 在图表生成前完成过滤/排序，可链式组合，适合多图表共享同一份数据源并分别展示不同视图。
• dataZoom 交互筛选：通过 dataZoomInside / dataZoomSlider / dataZoomSelect 进行区域缩放或框选，快速聚焦到某个数值区间或子集，适合散点图、折线图等需要“框选/缩放查看细节”的场景。
• 多图表联动：一个控件（如下拉框、单选）改变筛选条件，统一更新多个图表实例的 option，实现联动效果。

方式一 前端内存过滤与 setOption 示例

• 思路：准备原始数据 → 监听筛选条件变化 → 在内存中过滤/排序 → 用 setOption 增量更新图表。
• 示例（原生 JS，可类比到 Vue/React 等框架）：

// 原始数据
const rawData = [
  { category: 'A', value: 120 },
  { category: 'B', value: 200 },
  { category: 'C', value: 150 },
  { category: 'A', value: 80 },
  { category: 'B', value: 70 },
  { category: 'C', value: 110 }
];

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

function updateChart(selectedCategory = 'All') {
  // 1) 过滤
  const filtered = selectedCategory === 'All'
    ? rawData
    : rawData.filter(d => d.category === selectedCategory);

  // 2) 排序（可选）
  filtered.sort((a, b) => b.value - a.value);

  // 3) 更新图表
  chart.setOption({
    xAxis: { type: 'category', data: filtered.map(d => d.category) },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: filtered.map(d => d.value) }]
  });
}

// 绑定控件事件（示例：下拉框）
document.getElementById('categorySelect').addEventListener('change', e => {
  updateChart(e.target.value);
});

// 首次渲染
updateChart();

• 要点：setOption 会合并更新，只改动需要变更的维度即可；在 Vue 中可用 watch 监听筛选条件并调用 setOption，实现响应式更新。

方式二 dataset 与 transform 示例

• 思路：用 dataset.source 放原始数据，声明一个或多个 transform 节点（如 filter、sort）产出派生数据集，系列通过 datasetIndex 或 series.encode 绑定到对应数据集。
• 示例（按年份筛选并排序）：

option = {
  dataset: [
    {
      // 原始数据
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['Cake', 123, 32, 2011],
        ['Latte', 231, 14, 2011],
        ['Tofu', 235, 5, 2011],
        ['Milk Tee', 341, 25, 2011],
        ['Cake', 143, 30, 2012],
        ['Latte', 201, 19, 2012],
        ['Tofu', 255, 7, 2012],
        ['Milk Tee', 241, 27, 2012],
        ['Cake', 153, 28, 2013],
        ['Latte', 181, 21, 2013],
        ['Tofu', 395, 4, 2013],
        ['Milk Tee', 281, 31, 2013]
      ]
    },
    {
      // 派生数据集：筛选 Year === 2011
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2011 }
      }
    },
    {
      // 派生数据集：筛选 Year === 2012 并按 Year 降序
      transform: [
        { type: 'filter', config: { dimension: 'Year', value: 2012 } },
        { type: 'sort', config: { dimension: 'Year', order: 'desc' } }
      ]
    }
  ],
  series: [
    {
      type: 'pie',
      radius: 50,
      center: ['25%', '50%'],
      datasetIndex: 1  // 使用第2个 dataset（2011）
    },
    {
      type: 'pie',
      radius: 50,
      center: ['75%', '50%'],
      datasetIndex: 2  // 使用第3个 dataset（2012，已排序）
    }
  ]
};

• 要点：transform 的输入可通过 fromDatasetIndex/fromDatasetId 指定；多个 transform 可组成链式流程，先过滤再排序等。

方式三 dataZoom 交互筛选示例

• 思路：为图表添加 dataZoomInside / dataZoomSlider / dataZoomSelect，用户通过拖拽、滚轮或框选改变坐标轴的可视区间，从而“筛选”出关注的数据子集。
• 示例（折线图 + 滑动条缩放）：

option = {
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  dataZoom: [
    {
      type: 'slider',          // 滑动条型
      xAxisIndex: 0,
      start: 0,
      end: 100
    },
    {
      type: 'inside',         // 内置型（鼠标滚轮/拖拽）
      xAxisIndex: 0
    }
  ],
  series: [{
    type: 'line',
    data: [
      [10, 23], [20, 45], [30, 30], [40, 70], [50, 50],
      [60, 80], [70, 60], [80, 90], [90, 40], [100, 85]
    ]
  }]
};

• 要点：dataZoom 适合“区间筛选/聚焦细节/去除离群点”的交互需求，可与上述两种方式叠加使用。

多图表联动与性能建议

• 联动思路：用一个或多个控件（如下拉框、单选、时间范围）维护全局筛选状态，在状态变化时：
  • 方式一：批量过滤各图的数据并分别调用 setOption；
  • 方式二：只更新 dataset 的输入或某个 transform.config，让图表自动派生出新结果。
• 性能建议：
  • 大数据量时优先使用 dataset + transform，减少前端手动拼装；
  • 频繁交互时避免全量重建 option，利用 setOption 的合并更新只改动必要字段；
  • 对实时性要求高的场景，考虑节流/防抖控件事件，避免短时间内多次重绘。