在 Vue 3 中监听 ECharts 柱状图点击事件需配置 triggerEvent: true 并绑定 click 事件，回调中通过 params.componentType === 'series' 判断点击柱子，再提取 name、value、dataIndex、seriesIndex 和 data 等字段。

在 Vue 3 中监听 ECharts 柱状图点击事件并获取当前点击的数据项，核心是利用 ECharts 的 click 事件回调和 params 参数结构。只要配置得当，就能准确拿到 name、value、dataIndex、seriesIndex 等关键信息。

确保图表选项启用点击响应

柱状图的 x 轴和 y 轴默认不触发 click 事件，需显式开启：

• xAxis 和 yAxis 配置中添加 triggerEvent: true
• series 中建议设置 cursor: 'pointer' 提升交互提示

在组件中绑定并处理 click 事件

使用 @click 监听图表容器（推荐用 或原生

）：

• 若用 vue-echarts：直接在模板中写 @click="onChartClick"
• 若用原生 echarts.init：在初始化后调用 myChart.on('click', handler)
• 回调函数中检查 params.componentType —— 值为 'series' 表示点中了柱子

从 params 中提取数据项信息

当点击柱子时，params 对象包含完整上下文：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• params.name：对应 x 轴标签名（如 “衬衫”）
• params.value：该柱子的数值（可能是数字或数组，取决于 series.data 格式）
• params.dataIndex：数据在 series.data 数组中的索引
• params.seriesIndex：当前系列在 series 数组中的索引（多系列时有用）
• params.data：原始数据项对象（若 series.data 是对象数组，此处可直接取字段）

常见注意事项

避免踩坑，注意以下几点：

• 确保 option 已完整设置并已调用 setOption，否则事件可能不生效
• 不要混淆 @click（图表区域点击）和 @zr:click（底层 zrender 全局点击），前者更稳定、语义清晰
• 如果点击无响应，检查是否遗漏 triggerEvent: true，或图表容器宽高为 0
• 在 onUnmounted 或组件销毁前调用 myChart.off('click') 防止内存泄漏

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！