echarts实现点击图表添加标记

echarts中提供了一些事件，例如点击、鼠标移入移除、右键之类的，但是它只能监听图表中某些特定位置，例如折线图只能监听到点击到拐点才会触发，所以我下面就是直接在绘制图表的div中监听了点击、右键事件了。

我实现的是点击图表展示当前横轴即对应的值（吐槽：其实echarts中提供了tooltip了可以看到，非要再点击留在上面看，没办法，研发只能照做，研发真该s），然后右键清空标记 ，下面我做了个demo，先看下效果吧：

我是把echarts图表封装了个组件，所以这里直接贴完整代码了，就是封装的这个图表组件，在需要的地方引入，传数据或者按需调整即可。

<template><div class="wft-w-h-100" :id="`wft-charts-${id}`" @click="chartClick" @contextmenu.prevent="clearMark()" style="position: relative;" />
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, onBeforeUnmount, watch } from 'vue';let charts: echarts.ECharts | null = nullconst props =