如何在Echarts折线图中触发线条（非数据点）的点击事件？

方法一：利用Echarts原生click事件判断 #

默认的mouseup事件仅在点击数据点时返回有效参数，改用click事件并通过参数判断点击对象为折线线条而非数据点：

myChart.on('click', function (params) {
  // 点击折线线条时，params.dataIndex为undefined，同时匹配系列类型为折线
  if (params.componentType === 'series' && params.seriesType === 'line' && params.dataIndex === undefined) {
    console.log('触发折线点击事件', params);
    // 在此执行你的业务逻辑
  }
});

方法二：通过画布底层事件监听 #

若上述方法不生效，可直接监听Echarts底层画布的鼠标事件，判断点击的图形元素类型：

myChart.getZr().on('mouseup', function (event) {
  // 点击元素为折线时触发逻辑
  if (event.target && event.target.type === 'line') {
    console.log('点击了折线线条');
    // 业务逻辑代码
  }
});

支持该功能的其他可视化库 #

• D3.js：完全自定义可视化流程，可直接为绘制的折线SVG元素绑定click事件，自由度极高，适合高度定制的场景。
• Highcharts：原生支持折线系列的点击事件，只需在plotOptions.line.events中配置click回调，点击折线任意位置（包括非数据点）都会触发。
• Chart.js：可通过获取折线对应的Canvas路径元素绑定事件，或调整pointHitRadius参数扩大可点击区域，实现点击线条的需求。

内容的提问来源于stack exchange，提问作者autumnrustle