ECharts 事件处理详解
ECharts 提供了非常丰富的事件系统，支持监听用户交互（如点击、鼠标悬停、缩放、图例切换等），并允许自定义处理逻辑。事件处理是实现图表交互（如点击跳转、弹窗提示、联动更新其他图表）的基础。
1. 事件绑定方式
ECharts 使用 myChart.on(eventName, handler) 绑定事件，myChart.off() 解绑。
// 绑定事件
myChart.on('click', function (params) {
console.log('点击了', params);
});
// 指定系列或组件的事件（推荐，避免全局冲突）
myChart.on('click', 'series', function (params) { ... });
myChart.on('click', 'series.line', function (params) { ... }); // 只针对 line 系列
// 解绑事件
myChart.off('click', handler); // 指定函数解绑
myChart.off('click'); // 解绑所有 click 事件2. 常用事件列表
| 事件名 | 触发时机 | params 参数主要内容 |
|---|---|---|
| click | 点击图形元素或坐标轴 | seriesName, name, value, dataIndex 等 |
| dblclick | 双击 | 同 click |
| mousedown / mouseup | 鼠标按下/抬起 | 同 click |
| mouseover | 鼠标移入元素 | 同 click |
| mouseout | 鼠标移出元素 | 同 click |
| globalout | 鼠标移出整个图表区域 | 无 |
| legendselectchanged | 图例选中状态改变 | selected: {系列名: true/false} |
| dataZoom | 数据区域缩放 | start, end, batch[] |
| dataviewchanged | 数据视图编辑后 | 无 |
| brushselected | 选框完成 | areas[], batch[] |
| rendered | 图表渲染完成（每次 setOption 后） | 无 |
| finished | 图表所有动画完成 | 无 |
3. 常见应用示例
示例1：点击柱状图/饼图显示详情
myChart.on('click', function (params) {
if (params.componentType === 'series') {
alert(`您点击了 ${params.seriesName} 的 ${params.name}，值为 ${params.value}`);
// 或跳转页面
// window.location.href = `/detail?id=${params.data.id}`;
}
});示例2：点击饼图高亮并更新其他图表（联动）
myChart.on('click', 'series.pie', function (params) {
// 高亮当前扇区
myChart.dispatchAction({
type: 'highlight',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
});
// 更新另一个图表（假设 otherChart）
otherChart.setOption({
title: { text: `详情：${params.name}` },
series: [{ data: detailData[params.name] }]
});
});
// 鼠标移出时取消高亮
myChart.on('mouseout', 'series.pie', function () {
myChart.dispatchAction({ type: 'downplay' });
});示例3：监听图例切换（legendselectchanged）
myChart.on('legendselectchanged', function (params) {
console.log('当前选中系列：', params.selected);
// 例如隐藏某些系列时提示
const selectedCount = Object.values(params.selected).filter(v => v).length;
if (selectedCount === 0) {
alert('请至少选择一个系列！');
}
});示例4：监听 dataZoom 实现联动
myChart.on('datazoom', function (params) {
// 将当前缩放范围同步到另一个图表
otherChart.dispatchAction({
type: 'dataZoom',
start: params.start,
end: params.end
});
});4. dispatchAction：主动触发动作
ECharts 提供 dispatchAction 方法，可程序化触发事件或动作。
// 高亮某个数据项
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 5
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 3
});
// 选框选择
myChart.dispatchAction({
type: 'takeGlobalCursor',
key: 'brush',
brushOption: { brushType: 'rect' }
});5. 完整示例：点击柱状图弹窗 + 高亮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 事件处理示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px;"></div>
<script>
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: '点击柱子查看详情' },
tooltip: {},
xAxis: { data: ['衬衫', '毛衣', '裤子', '鞋子'] },
yAxis: {},
series: [{
type: 'bar',
data: [
{ value: 5, id: 1 },
{ value: 20, id: 2 },
{ value: 36, id: 3 },
{ value: 10, id: 4 }
]
}]
});
myChart.on('click', function (params) {
alert(`商品：${params.name}\n销量：${params.value}\nID：${params.data.id}`);
});
</script>
</body>
</html>官方文档（最权威）：
- 事件与动作手册：https://echarts.apache.org/handbook/zh/concepts/event/
- 事件列表：https://echarts.apache.org/zh/api.html#events
如果你有具体需求（如多图联动、点击钻取、自定义 tooltip 事件），告诉我，我可以给出更针对性的完整代码！
