记录鼠标是否在map 地图上面

问题描述: 使用echarts map 来渲染数据的时候需要将地图横向缩放 缩放之后宽度就会盖着左右两侧的内容 如果直接设置 overflow: hidden 就会出现另一个问题 鼠标移动到定位点的时候 tooltip 超出的地方也被隐藏了

解决办法: 经过各种想法 最终想到一个办法判断当前鼠标是否在地图上面如果在地图上面就不控制样式 如果不在地图上面就控制样式超出隐藏

代码

myChart = echarts.init(mapRef.value);
option && myChart.setOption(option);

// 获取ECharts实例的底层ZRender对象
zr = myChart.getZr();
// 添加鼠标移动事件监听
zr.on('mousemove', function (event) {
    var target = event.topTarget;
    if (target) {
        $emit('restStyle', true)
    } else {
        $emit('restStyle', false)
    }
});

const restStyle = (flag) => {
    let mapBox = document.querySelector('.map-box')
    let rankMapBox = document.querySelector('.rank-map-box')
    if(flag) {
        mapBox.style='overflow: unset;'
        rankMapBox.style = 'z-index: -1'
    }else {
        mapBox.style='overflow: hidden;'
        rankMapBox.style = 'z-index: 5'
    }
}

可能不是正规渠道但是也算解决了问题