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 地图重叠内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！