echarts地图文字重叠解决方案_echarts地图自适应中出现重叠错位的两个地图问题排查...

项目的可视化模块中使用了echarts作为图表库。当对散点类地图作自适应开发时,发现在对地图进行偏移或缩放的时候,画布上出现了重叠并且错位的两个地图。问题现象上图是对地图设置偏移出现的情况,下图是对地图放大出现的情况。为突出对比效果,图中用蓝、黑两种颜色对地图边框进行了着色。下面分别给出项目中对地图设置偏移和缩放的关键代码,其中的(配置项)主要字段是geo和series:1234567891011...
摘要由CSDN通过智能技术生成

项目的可视化模块中使用了echarts作为图表库。当对散点类地图作自适应开发时,发现在对地图进行偏移或缩放的时候,画布上出现了重叠并且错位的两个地图。

问题现象

上图是对地图设置偏移出现的情况,下图是对地图放大出现的情况。为突出对比效果,图中用蓝、黑两种颜色对地图边框进行了着色。

下面分别给出项目中对地图设置偏移和缩放的关键代码,其中的(配置项)主要字段是geo和series:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19option = {

geo: {

left: 450

},

series: [

]

}

option = {

geo: {

zoom: 1.1 // 设置缩放的字段

},

series: [

// ...

]

}

正如以上代码所示,根据以往经验,对地图进行偏移或缩放只需在option的geo属性中设置对应字段即可&#

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值