echarts柱子点击事件
时间: 2023-11-20 19:56:42 浏览: 61
在Echarts中,可以通过监听click事件来实现柱子的点击事件。具体实现方式如下:
1. 通过chart.on()方法来监听click事件,获取到点击的参数params,其中params.name表示点击的柱子的名称。
```javascript
mounted() {
this.$nextTick(() => {
this.initChart()
this.chart = echarts.init(this.$el, 'macarons')
let self = this
let chart = this.chart
this.chart.on('click', params => {
console.log(params)
self.$emit('getBar', params.name)
})
})
},
```
2. 通过chart.getZr().on()方法来监听click事件,获取到点击的参数params,通过chart.convertFromPixel()方法将像素坐标转换为数据坐标,获取到当前被点击的柱子的index,然后把index传递给父组件。
```javascript
mounted() {
this.$nextTick(() => {
this.initChart()
this.chart = echarts.init(this.$el, 'macarons')
let self = this
let chart = this.chart
this.chart.getZr().on('click', (params) => {
const position= [params.offsetX, params.offsetY];
if (chart.containPixel('grid', position)) {
let index= chart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
self.$emit('getBar', index)
}
});
})
},
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)