echarts中地图重叠问题解决
更新时间：2023年08月01日 10:19:03 作者：觉醒法师
在使用Echarts开发项目时,经常会遇到地图组件的开发,困扰许久的地图重叠问题,本文就来解决一下这个问题,感兴趣的可以了解一下
在使用Echarts开发项目时，经常会遇到地图组件的开发，困扰许久的地图重叠问题，无意间在echarts官方文档中找到了解决方案。
示例：
如上图，其代码如下：
geo: {
backgroundColor:'#232e67',
map: 'china',
roam: true,
},
series: [
{
backgroundColor:'#232e67',
name: '用户分布',
type: 'map',
mapType: 'china',
data: []
}
]该写法会造成上图地图重叠现象，对于该问题，在echarts官方文档中找到了答案，可以通过 geoIndex属性指定geo组件
官方叙述如下：
默认情况下，map series会自己生成内部专用的geo组件。但是也可以用 geoIndex 指定一个geo组件。这样的话，map和其他 serise中的type=map可以共享一个geo组件。并且，Geo组件的颜色也可以被这个map serise控制。当设定 geoIndex后，series-map.map属性，以及series-map.itemStyle等样式配置不再起作用，而是采用geo中的相应属性。
代码如下修改即可：
geo: {
backgroundColor:'#232e67',
map: 'china',
roam: true,
},
series: [
{
backgroundColor:'#232e67',
name: '用户分布',
type: 'map',
mapType: 'china',
geoIndex: 0,
data: []
}
]
只要添加geoIndex属性，即可将series中的map数据，指定到Geo组件上了。
到此这篇关于echarts中地图重叠问题解决的文章就介绍到这了,更多相关echarts 地图重叠内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js实现表单Radio切换效果的方法,涉及javascript实现页面元素的隐藏与显示及复选框的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript中包装对象的一些知识点，包括内置对象等2013-08-08
这篇文章主要介绍了JS+CSS实现类似QQ好友及黑名单效果的树型菜单,涉及JavaScript结合鼠标事件针对页面元素CSS样式的动态操作技巧,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细介绍了JavaScript Canvas绘制六边形网格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要为大家详细介绍了bootstrap模态框示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
javascript document.referrer 用法
document对象的referrer属性，返回导航到当前网页的超链接所在网页的URL。2009-04-04
本文的内容就如同标题一样，这篇文章将会灵活的运行Array对象的一些方法来实现看上去较复杂的应用。相信对大家学习或者理解javascript中的Array对象能具有一定的参考借鉴价值，有需要的朋友们下面跟着小编一起来学习学习吧。2016-11-11
这篇文章主要介绍了JS如何输出26个英文字符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
js获取URL的参数的方法(getQueryString)示例
getQueryString方法默认返回的是 string如果是int类型，则JS使用的时候，要进行转换一下，下面有个不错的示例，大家可以参考下2013-09-09
地址栏中的js改变页面的风格代码2008-04-04
最新评论