h5页面含有多个echarts,其中每个都有tooptips,点击其他区域tooptip不消失,体验不好

h5页面含有多个echarts,其中每个都有tooptips,点击其他区域tooptip不消失,体验不好

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改成一个变量,在代码中根据需求修改这个变量值也可以

 

h5页面含有多个echarts,其中每个都有tooptips,点击其他区域tooptip不消失,体验不好

上一篇:PHP个人博客系统开发历程


下一篇:ingress-nginx自带认证功能【nginx自带】