关于Echarts柱状图点击事件的实现方法
程序员文章站
2022-05-16 10:04:06
开发过程中,我们经常会碰到这样的需求:在柱状图上,点击某条柱形,调用相应的方法或跳转相应的界面 接下来就详细介绍如何实现柱状图的点击事件,其中maChart是绘图对象 一、简单的点击事件 这样就可以获得每条柱形所对应的数据 若需要在每条柱形上添加额外的属性,比如id等等,可以在series中,通过对 ......
开发过程中,我们经常会碰到这样的需求:在柱状图上,点击某条柱形,调用相应的方法或跳转相应的界面
接下来就详细介绍如何实现柱状图的点击事件,其中machart是绘图对象
一、简单的点击事件
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 xindex = mychart.convertfrompixel({ seriesindex: 0 }, [params.offsetx, params.offsety])[0] console.log(xindex) } })
其中,getzr()方法可以监听到整个画布的点击事件,zindex是被点击的柱形的index
若要实现获取id的效果,则需要拿到series的数组,再通过index拿到对应的数据对象
上一篇: C-结构
下一篇: C语言(六)结构体和联合体