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 地图重叠内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
FF没有offsetX属性，有个layerX属性，只要将事件源的位置设置成相对定位(position:relative)或绝对定位(position:absolute)，两者结果就相等，表示事件源相对于父元素的X坐标。2010-03-03
这篇文章主要介绍Javascript如何判断数据类型和数组类型,通俗易懂,需要的朋友可以参考下。2016-06-06
js Array 对象用于在单个的变量中存储多个值,这里简单的接受下，需要的朋友可以参考下2013-03-03
event.keyCode键码值表 附只能输入特定的字符串代码
非常不错的应用，让文本框里只能输入money大家看下具体的实现代码，真是只有想到，原理很简单。2009-05-05
根据对象的某一属性进行排序的js代码（如：name,age）
实例为按降序排列，若想改为升序只需把比较器中的value2-value1改为value1-value2就可以了2010-08-08
微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等
这篇文章主要介绍了微信小程序api列表汇总包括网络API,媒体API,文件API ,数据API,位置API,界面API,微信小程序支付流程,微信小程序登录流程等,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了javascript 数组操作详解,需要的朋友可以参考下2015-01-01
本篇文章给大家总结了js保留两位小数的各种方法以及每种方法的实例代码分析，如果大家对此有需要，一起来学习下js保留两位小数的方法吧。2018-01-01
如果我们希望在页面引入图片。当我们基于webpack进行开发时，引入图片会遇到一些问题，这篇文章主要介绍了webpack之引入图片的实现及问题，非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了JS清除选择内容的方法,较为详细的分析了js操作文本的技巧,需要的朋友可以参考下2015-01-01
最新评论