echarts整列点击事件
时间: 2023-11-03 15:01:15 浏览: 192
echarts整列点击事件可以通过以下方式实现:
1. 使用click事件:通过监听click事件,获取到点击的参数params,然后判断点击位置是否在柱形图内部,如果是,则可以通过convertFromPixel方法获取到点击位置对应的x轴索引。
代码示例:
```javascript
myChart.on('click', function(params) {
let pointInPixel = [params.offsetX, params.offsetY];
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
console.log(xIndex);
}
});
```
2. 使用getZr().on方法:通过getZr()方法获取到zrender对象,然后使用on方法监听click事件,同样可以通过convertFromPixel方法获取到点击位置对应的x轴索引。
代码示例:
```javascript
myChart.getZr().on('click', function(params) {
let pointInPixel = [params.offsetX, params.offsetY];
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
console.log(xIndex);
}
});
```
以上两种方法都可以实现echarts整列点击事件,根据具体的需求选择适合的方法即可。请注意,在使用上述方法之前,确保已经创建好了echarts实例myChart。
阅读全文
相关推荐
















