h5页面含有多个echarts,其中每个都有tooptips,点击其他区域tooptip不消失,体验不好
解决方法一:
以vue脚手架处理为例:
处理思路:点击页面空白处,判断当前点击区域是否是canvas,如果不是就将所有的echarts中的tooptips隐藏
1、在main.js中添加js
vue.prototype.pageClick = function(id,callback){ document.getElementById(id).onclick = function(e){ if(e.target.nodeName != ‘CANVAS‘){ callback() } } }
2、在使用echarts的页面
mounted(){ this.pageClick(‘整个页面最外层的id‘,this.removeTooptips) }, methods:{ removeTooptip(){ var arr = document.getElementsByTagName(‘canvas‘); for(var i=0;i<arr.length;i++){ //这里的id是echarts生成实例上的id,getInstanceByDom方法是找到id下的echarts实例 let id = arr[i].parentNode.parentNode.getAttribute("id"); var ee = echarts.getInstanceByDom(document.getElementById(id)); ee.dispatchAction({ type:‘hideTip‘ }) ee.dispatchAction({ type:‘updateAxisPointer‘, }) } } }
解决方法二:
在echarts的setOption里面的tooptips里面有个属性是show:true,也可以将这里的true改成一个变量,在代码中根据需求修改这个变量值也可以