寫這個文章的時候真的是怕自己忘了，這個問題解決起來對我來說是真的不容易。

近期換了家公司，里面的項目涉及到地域數據統計，所以用到了echarts的地圖功能，早期版本用的是echarts2，使用了map統計方式后，在地圖上增加了“總部”標記，于是采用了markPoint的屬性來實現，一切正常，當鼠標移動到標記上以及點擊標記的時候，會有事件觸發，一切看起來都比較正常。

后來系統升版，有個柱狀統計圖需要用到3D圓柱的特效，但echarts顯然實現不了，可客戶卻一定要堅持，還給出了示例。沒辦法，我只好去找echarts的官方api，看看有有沒有好的方法，實在不行就只能換個別的工具了。果然，在echarts3的介紹里我發現了pictorialBar這個新增的樣式，于是我將客戶提供的圓柱形示例圖截取了一部分采用這個方式實現了效果，基本算是過關了。但這樣一來遇到了新的問題。

原來的地圖標記功能，在echarts2的時候，采用markPoint實現沒什么問題，但換成echarts3后發現，同樣是markPoint，在地圖上標記了之后，鼠標移動和點擊事件統統無效了！應該是被地圖給覆蓋掉了。這下麻煩了，本來最簡單的方法就是echarts2和echarts3混用，但我不信邪，既然是高一個大版本，那么echarts3肯定有解決的方法的！于是我開始一點點試了起來：

1、采用分層

在echarts的地圖設置屬性里，有z和zlevel的屬性，根據描述，這兩個屬性都是用于不同地圖分層的優先級的，就是我們常說的z軸，值大的會覆蓋掉值小的。于是我將markPoint的z和zlevel調大，看看是否可以將事件優先級調高，結果沒有任何反應——失敗；應該是z和zlevel不適用于markPoint；

2、地圖疊加

在網上看到一些文章，好像是可以兩個相同的地圖疊加到一起實現這個效果，于是我用了兩個map，第二個map只有markPoint的設置，疊加到第一個map上，結果卻還是沒有時間觸發——失敗；應該也可能只是在echarts2里有效；

3、散點圖與地圖疊加

仔細看了看官方api，發現了這么一句話

Tip: ECharts 2.x 中在地圖上通過 markPoint 標記大量數據點方式在 ECharts 3 中建議通過地理坐標系上的 scatter 實現。

難道說這就是替代的方式？我決定試一下。

具體代碼不貼了，主要設置如下：

geo屬性設置好地圖種類；

series里，第一組為散點圖，type: 'scatter'，coordinateSystem: 'geo',data里將“總部”的地理坐標寫入；第二組為普通地圖，type:'map'，mapType:'已經加載的地圖'，但要增加一個屬性：geoIndex，設置為0，意味著要跟前面的散點圖使用同一個geo；

設置好了后，發現在地圖上看不到“總部”這個點了！這是什么情況？難道這也不行？我不甘心地用鼠標在地圖上來回滑動，突然間在“總部”的那個地理坐標上出現了事件觸發！這是個好現象，說明散點圖與地圖疊加是有效的！但為什么看不到呢？——失敗一半；

4、檢查嘗試

我又回到了之前的思路，想想會不會也是因為z和zlevel的原因，因為這次不是markPoint了，所以會不會有效呢？結果設置了z和zlevel也白扯，看來不是這個問題；

我又看了看symbol這個屬性，echarts提供了一些基本的形狀，如圓形，三角形等等，當然也可以是一些圖片。于是我試著將symbol設置了一個自定義圖片，結果讓我比較欣慰：能看到了！當然“總部”這兩個漢字label還是看不到，但至少說明散點圖與地圖疊加是可以的！這時候我已經有點眼花了，甚至想想放棄了，直接用圖片做個標記點也挺好，但我又不甘心，一定要弄出來和原來的echarts2一樣的效果！——失敗三分之一——還是失敗；

5、意想不到

我靜下心來想了想，圖片可以顯示，基本的形狀和文字卻不行，那么它們之間的區別是什么呢？顏色！基本形狀和文字都可以自定義顏色，而圖片卻不行，但我看了看設置，地圖底色是藍的，標記點設置的是紅的，再怎么著也不可能混一起吧？我不死心，又檢查了下其他的地方。這時，我發現了一個屬性：visualMap，這個屬性本來是一個顏色漸變的特效，用顏色的不同來直觀地展示數據的不同，so？散點圖里的點，也是被visualMap控制的！所以，就被湮沒在其他的顏色里，看不出來了。想到這里，我又仔細查看了visualMap的設置，看看能不能找到解決辦法，果然有了結果：

在 visualMap 組件所控制的 series 中，如果 series 中某個數據項需要避開 visualMap 映射，可以這么配置：

series : [ {name: 'Shanghai', value: 251}, {name: 'Haikou', value: 21}, ?

// 設置 `visualMap: false` 則 visualMap 不對此項進行控制，此時系列 ?

// 可使用自身的視覺參數（color/symbol/ ...控制此項的顯示。 ?

{name: 'Beijing', value: 821, visualMap: false}, ... ]

按照這個要求，我把“總部”里的visualMap設置為false之后，一切都結束了！這個世界又變美好了！

總結：echarts的強大功能是毋庸置疑的，而且對于低版本的功能實現，高版本基本都應該會支持，可能只是實現方式變了。就好像我們常用的java編程一樣，jdk里總有一些過時的方法，但同時總會有替代的方法和接口來實現相同的甚至比以前更強大的功能。就好像這個echarts3里的散點圖一樣，可以有更多的以前markPoint沒有的設置，請大家慢慢發掘吧。

總結

以上是生活随笔為你收集整理的Echarts3里的地图标记点事件效果实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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