天天看点

vue中在echarts tooltip中添加点击事件

需求:

需要在echarts tooltip点击学校的名称,跳转到详情页面;项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件)

   ‘

 项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上

解决方法:

1、设置tooltip

enterable: true, //允许鼠标进入提示悬浮层中,triggeron:'click',//提示框触发的条件  mousemove鼠标移动时触发 click鼠标点击时触发  'mousemove|click'同时鼠标移动和点击时触发

2、定义hookToolTip变量,在formatter中给hookToolTip赋值,添加一个id,然后通过watch去检测dom元素,可以通过onclick去绑定事件,也可以通过addEventListerner去注册事件

vue中在echarts tooltip中添加点击事件
vue中在echarts tooltip中添加点击事件

3、在methods中添加方法

vue中在echarts tooltip中添加点击事件

4、完整代码