echarts怎样联动筛选

在 ECharts 中，“联动筛选”一般有几种常见场景和做法，下面按常用程度给你说明，并附示例代码。

一、图表之间的联动（最常见）

方式 1：使用 connect（多图联动）

适合：多个 ECharts 实例（如柱状图 + 折线图）联动 tooltip / 图例 / dataZoom

var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));

echarts.connect([chart1, chart2]);

✅ 效果：

• 鼠标 hover 一个图，另一个图同步 tooltip
• 图例联动显示/隐藏
• dataZoom 联动缩放

二、点击图表元素进行筛选（事件联动）

方式 2：使用 click 事件 + 重新 setOption

chart.on('click', function (params) {
  const name = params.name;

  // 根据点击项过滤数据
  const filteredData = rawData.filter(item => item.category === name);

  chart.setOption({
    series: [{
      data: filteredData
    }]
  });
});

✅ 常见用途：

• 点击柱状图 → 下方表格筛选
• 点击饼图 → 更新折线图

三、外部控件筛选（下拉框 / 按钮）

方式 3：HTML 控件 + ECharts 更新

<select id="type">
  <option value="all">全部</option>
  <option value="A">A类</option>
  <option value="B">B类</option>
</select>

document.getElementById('type').addEventListener('change', function () {
  const value = this.value;

  const data = value === 'all'
    ? rawData
    : rawData.filter(d => d.type === value);

  chart.setOption({
    series: [{ data }]
  });
});

四、图表联动外部表格 / 列表

思路：

1. ECharts 点击事件
2. 获取筛选条件
3. 用 JS 操作 DOM 或框架（Vue / React）更新表格

chart.on('click', params => {
  updateTable(params.name);
});

五、高级：ECharts + Vue / React 联动

在 Vue / React 中：

• ECharts 只负责“展示”
• 筛选项用组件状态控制
• 数据变化 → setOption

✅ 推荐方式（最清晰、最好维护）

总结对照表

如果你能告诉我：

• 用 Vue / React / 原生 JS？
• 是 图→图 还是 图→表 联动？

我可以直接给你一套可运行示例。