天天看點

echarts地圖配置

倉庫位址:
注:建議使用<code>echarts</code>繪制地圖安裝4.9版本的,5.x的<code>select</code>選中指令能調到你頭秃
echarts地圖配置
功能描述:該頁面可配置區塊<code>未選中</code>、<code>高亮</code>情況下的<code>貼圖</code>、<code>區塊顔色</code>、<code>邊框顔色</code>、<code>地圖陰影</code>,<code>文字顔色</code>等的配置,并添加<code>點選事件</code>可以擷取區塊名稱
echarts地圖配置
echarts地圖配置

自定義顔色+點選事件

自定義顔色

自定義顔色實作思路:需要将<code>series</code>中<code>map</code>的<code>geoIndex</code>設定為0(即把地圖上面的圖層關掉),然後對<code>geo</code>進行圖層設定(去除掉了<code>series</code>的地圖圖層就會展示地圖<code>geo</code>中的設定,那些個<code>label</code>、<code>itemStyle</code>都在<code>geo</code>中配置),并在<code>geo</code>中添加<code>regions</code>數組(後面會貼代碼),改數組會對指定區域進行顔色配置

點選事件

點選事件實作思路:不同于上面<code>tooltip</code>加點選事件,這裡講的是在<code>echarts</code>中添加點選事件點選事件想要擷取到資料,需要在<code>series</code>中<code>map</code>的<code>data</code>設定值(<code>name</code>為注入<code>echarts</code>地圖的名字,其他資料根據需求來)

上代碼

visualMap着色

實作思路

visualMap着色實作思路:series中map需帶name、value值,本質根據value大小進行着色,需在options中添加visualMap,進行最大、最小、顔色等的配置,達到我們想要的效果

貼代碼

echarts地圖配置

先寫一個彈框元件

再在需要用的地方引入

具體調用處的<code>tooltip</code>中引入<code>popDemo1</code>元件導出<code>html</code>代碼塊

echarts地圖配置
注:本人并不建議用這種,因為不能放大、縮小、拖拽,這些操作會造成點位偏移。

核心代碼如下