当前位置：首页 > web >正文

【ECharts】ECharts曲线图节点点击事件实现

web 2025/7/13 1:14:37

在 ECharts 中实现曲线图（折线图）节点点击事件，可以通过绑定 'click' 事件并判断事件参数来实现。以下是具体实现步骤：

1. 基本代码结构

<div id="chart" style="width: 600px; height: 400px;"></div>
<script>// 初始化图表const chart = echarts.init(document.getElementById('chart'));// 配置项const option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: { type: 'value' },series: [{type: 'line',data: [150, 230, 224, 218, 135, 147, 260],// 显示数据点符号（确保节点可点击）symbol: 'circle',symbolSize: 10}]};chart.setOption(option);// 绑定点击事件chart.on('click', (params) => {// 判断点击的是否是数据点if (params.componentType === 'series' && params.seriesType === 'line') {console.log('点击的节点信息:', params);// 执行自定义操作（例如弹窗、跳转等）alert(`点击了 ${params.seriesName} 的节点 ${params.name}，值为 ${params.value}`);}});
</script>

2. 关键参数说明

当点击节点时，事件回调函数 params 包含以下关键信息：

params.componentType: 组件类型（此处为 'series'）。
params.seriesType: 系列类型（此处为 'line'）。
params.seriesName: 系列名称（若未配置则为空）。
params.name: 节点的名称（对应 xAxis 的类目）。
params.value: 节点的数值（对应 yAxis 的值）。
params.dataIndex: 数据索引（在数组中的位置）。

3. 多系列场景

如果图表有多个系列，可通过 params.seriesIndex 或 params.seriesName 区分：

chart.on('click', (params) => {if (params.componentType === 'series' && params.seriesType === 'line') {const seriesName = params.seriesName;const dataIndex = params.dataIndex;const value = params.value;console.log(`点击了系列 ${seriesName} 的第 ${dataIndex} 个节点，值为 ${value}`);}
});

4. 动态数据或异步更新

如果数据是动态生成的，确保在数据更新后重新绑定事件（通常不需要，因为 ECharts 会保留事件监听）。

5. 注意事项

节点可见性: 确保系列配置中 symbol 不为 'none'，否则用户无法点击到隐藏的节点。
性能: 高频次点击事件可能需要防抖处理。
销毁事件: 在图表销毁时，使用 chart.off('click') 移除事件监听。

完整示例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts 节点点击事件</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body><div id="chart" style="width: 600px; height: 400px;"></div><script>const chart = echarts.init(document.getElementById('chart'));const option = {title: { text: '折线图节点点击示例' },xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },yAxis: {},series: [{type: 'line',data: [150, 230, 224, 218, 135, 147, 260],symbol: 'circle',symbolSize: 10,name: '销量'}]};chart.setOption(option);chart.on('click', (params) => {if (params.componentType === 'series' && params.seriesType === 'line') {const message = `系列：${params.seriesName}\n日期：${params.name}\n数值：${params.value}`;alert(message);}});</script>
</body>
</html>