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的地圖默認會覆蓋在上面

   geo regions功能可以對特定的區域配置樣式。

 

二、光暈效果的地圖

 

方式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
          }

 

  效果圖對比如下（按順序）

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　  　  

 額外注意：

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

 

......