echarts 阴影部分点击事件

需求：折线图hover区域可以被点击

分析：

1. 折线图中echarts的click事件是作用于转折点上，点击hover阴影区时不会呈现效果
2. 通过查阅资料，发现可以使用getZr()来监听整个画布事件，但getZr()属于私有API存在过多不稳定因素（当然使用它可以实现该需求）
3. 通过 ref 或者 echarts 中 getDom() 获取 ECharts 实例容器的 dom 节点，通过addEventListener对click事件进行监听
4. 通过2，3以上两种方式获取鼠标位移坐标，判断坐标是否在grid上，转换像素坐标为逻辑坐标系

代码实现：

<script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import * as echarts from 'echarts'

 const clickHover = (params: any) => {
   // 获取鼠标位移
   const pointInPixel = [params.offsetX, params.offsetY]
   console.log('pointInPixel', pointInPixel)
   // 判断坐标是否在grid上
   if (chart.containPixel('grid', pointInPixel)) {
     // 转换像素坐标为逻辑坐标系上的点
     let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
     console.log('data', option.series[0].data[xIndex])
   }
  }

 let chart: any
 const refChart = ref<HTMLElement | undefined>(undefined)

 onMounted(() => {    
   chart = echarts.init(refChart.value!)
   // chart.getZr().on('click', clickHover)
   refChart.value?.addEventListener('click', clickHover)
 })
 onBeforeUnmount(() => {
   refChart.value?.removeEventListener('click', clickHover)
 })
</script>
<template>
   <div class="chart" ref="refChart"></div>
</template>
<style></style>

效果展示：

 参考资料：javascript - 关于echarts的getZr这个Api,这个Api怎么在官方文档看不到？ - SegmentFault 思否

Documentation - Apache ECharts

结语：如果是点击x轴或者y轴，可以通过修改 containPixel 和 convertFromPixel中的参数实现，欢迎大家尝试分享~