Vue 3 使用 vue-echarts 的柱状图 barItem 和 x, y 轴点击事件实现

漸忘596

已于 2023-08-23 10:58:28 修改

阅读量4.3k

点赞数 4

文章标签： vue.js echarts javascript typescript

于 2023-08-03 13:58:46 首次发布

本文链接：https://blog.csdn.net/weixin_68465735/article/details/132081248

版权

本文介绍了在Vue 3项目中，如何使用vue-echarts实现柱状图的barItem和x, y轴点击事件。通过在template中绑定事件监听，设置xAxis和yAxis的triggerEvent属性，以及在事件回调中根据componentType判断点击位置，实现不同区域的点击事件处理。同时，文章提供了点击事件参数params的详细说明，以及如何获取数据索引。" 125659649,8737398,CAD2020 ARX二次开发：使用Wizard创建项目,"['CAD开发', 'ARX开发', 'Visual Studio集成', 'AutoCAD', '二次开发']

摘要由CSDN通过智能技术生成

需求背景:

最近使用 Vue 3 开发柱状图功能，图表已经绘制完成了。但是突然有需求加进来要可以点击柱状图的柱子 barItem 和 x, y 轴的坐标，然后根据点击的位置，处理不同区域的点击事件。作为 CV 程序员，第一时间搜索网上的解决方案，但是基本都是 Vue 3 搭配 ECharts 实现的，作为菜鸟且项目已经使用 vue-echarts 实现了图标的需求，所以那就只能借鉴ECharts 的实现方案，然后看有没有对应的方法。然后就找到了下面的方案：

1、template 中的Vue-ECharts 的数据绑定和事件响应：

   <v-chart
          ref="barChartRef"
          v-if="isShowBarChart"
          class="bar-chart"
          :option="barOption"
          autoresize
          @click="clickBarInBarChart"
          @zr:click="handleZrClick"
        />

其中 @click 可以监听到大部分的事件，我们本次的重点就是 click 方法；

而 @zr:click 方法是一个图标区域内任意位置点击的事件监听，如果需要全局位置回调处理，那么可以在 @click 方法的基础上排除掉里面能响应的事件之后，做一个事件筛选；

2、数据处理的时候需要在 xAxis 和 yAxis 对象中分别添加&#x