vue中 给echarts柱状图加点击事件
时间: 2023-10-17 19:16:26 浏览: 84
在 Vue 中给 ECharts 柱状图添加点击事件可以通过 ECharts 的 `on` 方法来实现。具体步骤如下:
1. 在 `mounted` 钩子函数中初始化 ECharts 实例,并将其挂载到某个元素上,如下所示:
```javascript
import echarts from 'echarts'
export default {
mounted() {
// 初始化 ECharts 实例
const myChart = echarts.init(document.getElementById('chart'))
// 将实例挂载到某个元素上
myChart.setOption(options)
}
}
```
2. 在 `mounted` 钩子函数中使用 `on` 方法为柱状图添加点击事件,如下所示:
```javascript
import echarts from 'echarts'
export default {
mounted() {
// 初始化 ECharts 实例
const myChart = echarts.init(document.getElementById('chart'))
// 将实例挂载到某个元素上
myChart.setOption(options)
// 为柱状图添加点击事件
myChart.on('click', params => {
console.log(params) // 打印点击的柱状图数据
})
}
}
```
其中,`params` 参数是一个包含点击柱状图相关信息的对象,例如 `params.name` 表示柱状图的名称,`params.value` 表示柱状图的值等等。你可以根据自己的需求来使用这些参数。
阅读全文