大屏引入echarts地图后出现容器内没有地图和省份数据不显示的问题

在大屏项目中遇到Echarts地图显示异常和鼠标交互失效的问题。地图原本应显示在指定容器1,却出现在小容器2内。通过调整setOption的参数解决了位置问题,但随之而来的是鼠标悬停时无法显示省市数据及地图缩放功能失效。发现原因是地图容器下方的动画层遮挡导致,移除动画后地图恢复正常显示并能正确显示各省份数据。
摘要由CSDN通过智能技术生成

大屏引入echarts地图后出现容器内没有地图和省份数据不显示的问题

前言

做了一个大屏项目,在引入地图这出了两个bug,特此在这记录下。

正文

问题1:地图不能在指定的容器内显示

在这里插入图片描述

我想把地图放在1处,但是渲染出来地图却在2的小框里面,造成显示不完整。找了半天原因,大概是中心点偏移,具体可参考这篇文章。按照作者的文章,我把setOption的第二个参数加上true后,又出现了新的问题,也就是问题二。

问题二:鼠标放在地图的省市上不能出现省市的数据

我的预期目标是这样:

在这里插入图片描述

也就是当鼠标放在西藏的板块时,tooltip里的提示就会出来。而事实相反,不仅提示没有显示,地图还不能缩放【我已经设置了roam的值了】。经过半天排查,发现是因为地图这个容器下我放了一个动画。也就是动画的容器和地图的容器是重叠的,所以影响了鼠标经过的一系列操作。我把动画删除后,地图就能正常的显示各省份的数据了。

结尾

这些问题bug仅供参考,希望能对你们有帮助!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值