开发过程中，我们经常会碰到这样的需求：在柱状图上，点击某条柱形，调用相应的方法或跳转相应的界面接下来就详细介绍如何实现柱状图的点击事件，其中myChart是绘图对象
一、简单的点击事件
myChart.on('click', function (params) {
console.log(params)
})这样就可以获得每条柱形所对应的数据
若需要在每条柱形上添加额外的属性，比如id等等，可以在series中，通过对象去定义，其中value是柱形的值
seriesData: [{value: 1, id:'...'}, {value: 2, id:'...'}, ......]这个id同样可以在上面的点击事件的params中获取到
注意：此方法虽实现了点击，但是只限于点击柱形中有数据的部分，而对于没有数据的区域，点击无效，如下图
若要实现点击整条柱形区域都有效，如下图，请看第二个方法
二、整条柱形的点击事件
myChart.getZr().on('click', params => {
let pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
//点击第几个柱子
let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
// console.log(pointInGrid)
// 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
// 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
// x轴数据的索引
let xIndex = pointInGrid[0]
// y轴数据的索引
let yIndex = pointInGrid[1]
var a = dataAxis[yIndex];
}
})其中，getZr()方法可以监听到整个画布的点击事件，xIndex是被点击的柱形的index
若要实现获取id的效果，则需要拿到series的数组，再通过index拿到对应的数据对象
三、答疑
3.1 getZr()方法在哪里定义？
答：echarts的内置函数
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/117257.html
