解决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组件上了。

经验分享 程序员 微信小程序 职场和发展