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
          }

 

  效果图对比如下(按顺序)

          

          

             

 额外注意:

南海诸岛样式重置,如果不处理会出现

 

......

 

 

posted @ 2020-09-01 14:54  树叶铃铛  阅读(3534)  评论(2编辑  收藏  举报