echarts中地圖重疊問題解決
在使用Echarts開發(fā)項目時,經(jīng)常會遇到地圖組件的開發(fā),困擾許久的地圖重疊問題,無意間在echarts官方文檔中找到了解決方案。
示例:

如上圖,其代碼如下:
geo: {
backgroundColor:'#232e67',
map: 'china',
roam: true,
},
series: [
{
backgroundColor:'#232e67',
name: '用戶分布',
type: 'map',
mapType: 'china',
data: []
}
]該寫法會造成上圖地圖重疊現(xiàn)象,對于該問題,在echarts官方文檔中找到了答案,可以通過 geoIndex屬性指定geo組件
官方敘述如下:
默認情況下,map series會自己生成內(nèi)部專用的geo組件。但是也可以用 geoIndex 指定一個geo組件。這樣的話,map和其他 serise中的type=map可以共享一個geo組件。并且,Geo組件的顏色也可以被這個map serise控制。當設(shè)定 geoIndex后,series-map.map屬性,以及series-map.itemStyle等樣式配置不再起作用,而是采用geo中的相應(yīng)屬性。
代碼如下修改即可:
geo: {
backgroundColor:'#232e67',
map: 'china',
roam: true,
},
series: [
{
backgroundColor:'#232e67',
name: '用戶分布',
type: 'map',
mapType: 'china',
geoIndex: 0,
data: []
}
]
只要添加geoIndex屬性,即可將series中的map數(shù)據(jù),指定到Geo組件上了。
到此這篇關(guān)于echarts中地圖重疊問題解決的文章就介紹到這了,更多相關(guān)echarts 地圖重疊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript下搜索子字符串的的實現(xiàn)代碼(腳本之家修正版)
由于我的項目中要求到要對一個字符串進行查找,其查找要求有點BT了2009-12-12
javascript巧用eval函數(shù)組裝表單輸入項為json對象的方法
這篇文章主要介紹了javascript巧用eval函數(shù)組裝表單輸入項為json對象的方法,實例分析了JavaScript使用eval函數(shù)動態(tài)構(gòu)造json對象的相關(guān)技巧,需要的朋友可以參考下2015-11-11
實例詳解JavaScript靜態(tài)作用域和動態(tài)作用域
作用域是指程序源代碼中定義變量的區(qū)域,作用域規(guī)定了如何查找變量,也就是確定當前執(zhí)行代碼對變量的訪問權(quán)限,這篇文章主要給大家介紹了關(guān)于JavaScript靜態(tài)作用域和動態(tài)作用域的相關(guān)資料,需要的朋友可以參考下2021-10-10
淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機制
這篇文章給大家詳細介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機制,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-10-10
javascript 從if else 到 switch case 再到抽象
大家覺得在接手遺留代碼時,見到什么東東是最讓人感到不耐煩的?復(fù)雜無比的 UML ?我覺得不是。2010-07-07

