随笔- 105 文章- 0 评论- 12 阅读- 26万

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

解决方法一：

以vue脚手架处理为例：

处理思路：点击页面空白处或者点击当前的echarts区域，判断当前点击区域是否是canvas，如果是就将当前对象以外的所有的echarts中的tooptips隐藏，如果是空白区域，全部隐藏

1、在data中定义变量中用于判断当前页面是否已经有tooptip显示了

data(){
            return {
                // 页面中的echarts是否有tooptip弹出了
                isHasTip:false,
            }
},

2、在使用echarts的页面

mounted(){
            var that = this;
            // 对整个页面做点击事件监听
        　　document.getElementById("页面ID").onclick = function(e){
                let id = '';
        　　　　if(e.target.nodeName != 'CANVAS'){
                    that.removeTool(id);
        　　　　}else {
                    id = e.target.parentNode.parentNode.getAttribute("id");
                    if(id){
                        that.removeTool(id);
                    }
                }
        　　}　　
        },
        methods:{
            removeTool(currentId){
                var that  = this;
                //如果存在currentId说明点击的对象是echarts，不做处理，记录id
                if(currentId && !that.isHasTip){
                    that.isHasTip = true;
                    return;
                }
                let canvasArray = document.getElementsByTagName('canvas');
                let array = [];
                for(var i=0;i<canvasArray.length;i++){
                    array.push(canvasArray[i].parentNode.parentNode.getAttribute("id"))
                }
                // 当前点击对象的echarts的id从数组中移除，不做隐藏处理
                let arr  = [];
                arr = array.filter((item)=>{
                    return item != currentId
                })
                for(var i=0;i<arr.length;i++){
                    //这里的id是echarts生成实例上的id，getInstanceByDom方法是找到id下的echarts实例
                    var ee = echarts.getInstanceByDom(document.getElementById(arr[i]));
                    // 隐藏tooptip
                    if(ee.dispatchAction){
                        ee.dispatchAction({
                            type:'hideTip'
                        })
                    }
                    // 隐藏AxisPointer
                    if(ee.dispatchAction){
                        ee.dispatchAction({
                            type:'updateAxisPointer',
                        })
                    }
                }
            }
        }