在 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 监听图表容器（推荐用 <v-chart></v-chart> 或原生 <div ref="chartRef">）：
<ul>
<li>若用 <code>vue-echarts：直接在模板中写 @click="onChartClick"
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')防止内存泄漏
