在使用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中地图重叠问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。