1. 程式人生 > 實用技巧 >echarts 地圖功能 之光暈

echarts 地圖功能 之光暈

一下從幾個方面解釋echarts地圖的引用,以中國地圖為例

主要地圖需要引入檔案

import'echarts/map/js/china' 一.地圖最基礎的結構 先看一下效果      

option的配置只需三行

option = {
        backgroundColor: '#013954',
        series: [{
          type: 'map',
          map: 'china'
        }]
      }

或者更少

 option = {
      backgroundColor: 
'#013954', geo: { map: 'china' } }
geo指定map:'china'就是一個地圖了,series的地圖預設會覆蓋在上面 georegions功能可以對特定的區域配置樣式二、光暈效果的地圖 方式1: 像上面說的geo指定map可以生成地圖,那麼如果把map地圖的大小設定跟series的地圖不一致,就會產生2個地圖,利用這個特點可以實現地圖重疊2D效果(我理解也算是光暈效果) 

let option = {
        backgroundColor: '#09132c',
        
// geo 指定map: 'china'就是一個地圖了,series的地圖預設會覆蓋在上面 // geo regions功能可以對特定的區域配置樣式。 geo: { map: 'china', zoom: 1.22, // 設定比例比sesies的大,出現外圍地圖疊加效果 emphasis: { // 高亮狀態下的多邊形和標籤樣式 label: { show: false }, itemStyle: { areaColor:
'#00FFFF' } }, regions: [{ name: '南海諸島', itemStyle: { normal: { opacity: 0, label: { show: false, color: '#009cc9' } } } }], itemStyle: { // 圖形樣式 areaColor: '#00FFFF', borderWidth: 2, borderColor: '#2AB8FF' } }, series: [{ type: 'map', map: 'china', zoom: 1.2, label: { show: true, color: '#fff' }, itemStyle: { // 圖形樣式 areaColor: '#274d68', borderWidth: 1, borderColor: '#2AB8FF', shadowColor: 'rgba(0, 10, 52, 1)', shadowBlur: 10 }, emphasis: { // 高亮狀態下的多邊形和標籤樣式 label: { show: false }, itemStyle: { areaColor: '#2AB8FF' } } }] }

方式2: 利用陰影的方式設定光暈

geo的配置
itemStyle: { // 圖形樣式
            areaColor: '#00FFFF',
            borderWidth: 2,
            borderColor: '#2AB8FF',
            shadowColor: '#2AB8FF',
            shadowBlur: 5,
            shadowOffsetX: 5,
            shadowOffsetY: 6
          }

方式3: 混合設定光暈

geo的配置重置 
itemStyle: { // 圖形樣式
            areaColor: '#00FFFF',
            borderWidth: 2,
            borderColor: '#2AB8FF',
            shadowColor: '#2AB8FF',
            shadowBlur: 10,
            shadowOffsetX: 1,
            shadowOffsetY: 2
          }

效果圖對比如下(按順序)

          

          

          

額外注意:

南海諸島樣式重置,如果不處理會出現

......