如何为ECharts热力图heatmap的单元格添加click点击事件

直接使用ECharts实例内置的事件监听机制即可实现需求，无需手动绑定原生DOM点击事件，具体操作如下：

• 完成热力图的初始化、option配置和渲染后，调用ECharts实例的on方法绑定全局点击事件
• 在回调函数中筛选事件来源，仅匹配热力图单元格的点击触发动作，避免其他组件点击触发逻辑
• 按需获取点击单元格的对应数据，实现自定义业务逻辑

代码示例 #

// 此处myChart为你初始化得到的ECharts实例对象
myChart.on('click', function (params) {
  // 仅热力图单元格的点击事件会进入后续逻辑
  if (params.componentType === 'series' && params.seriesType === 'heatmap') {
    // params对象包含当前点击单元格的全量数据，可按需取用
    const clickInfo = `点击的单元格信息：
    横轴分类：${params.name}
    纵轴分类：${params.value[1]}
    单元格数值：${params.value[2]}`
    alert(clickInfo)
  }
})

如果需要仅特定单元格触发弹窗，只需在上述if判断中额外增加对应数据的匹配规则即可。

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