echarts5.x按需加载绘制地图geo

背景

echarts@5按需加载的时候绘制地图，包括缺省时的地图，有数据时区域块颜色区分的地图，有数据时按经纬度定位闪烁效果的地图，以及世界地图不同区域显示不同颜色

缺省地图

const echarts = require('echarts/lib/echarts')
import ChinaGeo from './../geoJSON/china.json'
import WorldGeo from './../geoJSON/world.json'
import 'echarts/lib/component/geo'
import 'echarts/lib/chart/map'

/* 绘制空地图 */
drawEmpty () {
  echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo)
  this.echartsObj = echarts.init(document.getElementById(this.id))
  let option = {
      geo: {
        map: this.mapType,
        zoom: 1,
        roam: false
      }
    }
  this.echartsObj.setOption(option)
}

块颜色visualMap

const echarts = require('echarts/lib/echarts')
import ChinaGeo from './../geoJSON/china.json'
import WorldGeo from './../geoJSON/world.json'
import 'echarts/lib/component/geo'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/visualMap'

data = [
	{name: '四川省', value: 5200},
	{name: '河南省', value: 2300},
	{name: '黑龙江省', value: 730},
	{name: '福建省', value: 330}
]
mapType = 'china' // world 为世界地图

/* 绘制图形 */
drawEcharts () {
  echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo)
  this.echartsObj = echarts.init(document.getElementById(this.id))
  let option = {
    tooltip: {
      triggerOn: 'mousemove',
      backgroundColor: '#fff',
      extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
      padding: [12, 16, 12, 16],
      textStyle: {
        color: 'rgba(0,0,0,0.65)'
      },
      formatter: (param) => {
        if (Number.isNaN(param.value)) {
          return param.name + '：暂无攻击来源'
        } else {
          let result = '<p>'+ param.seriesName + '：' + param.name +'</p>'
          result += '<p>攻击次数：'+ param.value +'次</p>'
          return result
        }
      }
    },
    visualMap: {
      itemWidth: 4,
      min: 0,
      max: 10000,
      hoverLink: false,
      showLabel: true,
      textStyle: {
        color: 'rgba(0,0,0,0.65)'
      },
      pieces: [{
        gte: 5000,
        label: '>= 5000',
        color: '#FF7C32'
      }, {
        gte: 1000,
        lte: 4999,
        label: '1000 - 4999',
        color: '#FDCC1A'
      }, {
        gte: 500,
        lte: 999,
        label: '500 - 999',
        color: '#5AD7D8'
      }, {
        gte: 1,
        lte: 499,
        label: '1 - 499',
        color: '#4174FE'
      }, {
        value: 0,
        color: '#f5f5f5'
      }]
    },
    geo: {
      map: this.mapType,
      zoom: 1,
      roam: false, // 鼠标滑动放大缩小
      itemStyle: {
        areaColor: '#f5f5f5',
        borderWidth: '.5',
        borderColor: '#999'
      },
      emphasis: {
        itemStyle: {
          borderWidth: '1',
          areaColor: '#4168ff',
          borderColor: '#333',
          color: '#fff'
        }
      }
    },
    series: [{
      name: '攻击来源',
      type: 'map',
      geoIndex: 0,
      data: this.data
    }]
  }
  this.echartsObj.setOption(option)
}

经纬度定点闪烁effectScatter

const echarts = require('echarts/lib/echarts')
import ChinaGeo from './../geoJSON/china.json'
import WorldGeo from './../geoJSON/world.json'
import 'echarts/lib/component/geo'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/tooltip'

data = [
	{name: '上海', value: [121.4648, 31.2891, 21]},
    {name: '广州', value: [113.12244, 23.009505, 19]}
]
mapType = 'china' // world 为世界地图

/* 绘制图形 */
drawEcharts () {
  echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo)
  this.echartsObj = echarts.init(document.getElementById(this.id))
  let option = {
    tooltip: {
      formatter: (param) => {
        console.log(param)
        return 'kkk'
      }
    },
    geo: {
      map: this.mapType,
      zoom: 1,
      roam: false, // 鼠标滑动放大缩小
      itemStyle: {
        areaColor: '#f5f5f5',
        borderWidth: '.5',
        borderColor: '#999'
      }
    },
    series: [{
      type: 'effectScatter',
      coordinateSystem: 'geo',
      rippleEffect: {
        period: 4,
        brushType: 'stroke'
      },
      symbolSize: 10,
      itemStyle: {
        color: 'blue',
        opacity: 1
      },
      data: this.data
    }]
  }
  this.echartsObj.setOption(option)
}

彩色地图的经纬度定点闪烁effectScatter

const echarts = require('echarts/lib/echarts')
import ChinaGeo from './../geoJSON/china.json'
import WorldGeo from './../geoJSON/world.json'
import 'echarts/lib/component/geo'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/tooltip'

data = [
	{name: '上海', value: [121.4648, 31.2891, 21]},
    {name: '广州', value: [113.12244, 23.009505, 19]}
]
mapType = 'china' // world 为世界地图
CONST_CHINA_REGION_COLOR = [
  { name: '北京市', selected: false, itemStyle: {areaColor: '#cfc5de'} },
  { name: '天津市', selected: false, itemStyle: {areaColor: '#f1ebd1'} },
  { name: '上海市', selected: false, itemStyle: {areaColor: '#feffdb'} },
  { name: '重庆市', selected: false, itemStyle: {areaColor: '#e0cee4'} },
  { name: '河北省', selected: false, itemStyle: {areaColor: '#fde8cd'} },
  { name: '河南省', selected: false, itemStyle: {areaColor: '#e4f1d7'} },
  { name: '云南省', selected: false, itemStyle: {areaColor: '#fffed7'} },
  { name: '辽宁省', selected: false, itemStyle: {areaColor: '#e4f1d7'} },
  { name: '黑龙江省', selected: false, itemStyle: {areaColor: '#e4f1d7'} },
  { name: '湖南省', selected: false, itemStyle: {areaColor: '#fffed7'} },
  { name: '安徽省', selected: false, itemStyle: {areaColor: '#fffed8'} },
  { name: '山东省', selected: false, itemStyle: {areaColor: '#dccee7'} },
  { name: '新疆省', selected: false, itemStyle: {areaColor: '#fffed7'} },
  { name: '江苏省', selected: false, itemStyle: {areaColor: '#fce8cd'} },
  { name: '浙江省', selected: false, itemStyle: {areaColor: '#ddceeb'} },
  { name: '江西省', selected: false, itemStyle: {areaColor: '#e4f1d3'} },
  { name: '湖北省', selected: false, itemStyle: {areaColor: '#fde8cd'} },
  { name: '广西省', selected: false, itemStyle: {areaColor: '#fde8cd'} },
  { name: '甘肃省', selected: false, itemStyle: {areaColor: '#fde8cd'} },
  { name: '山西省', selected: false, itemStyle: {areaColor: '#fffdd6'} },
  { name: '内蒙古自治区', selected: false, itemStyle: {areaColor: '#ddcfe6'} },
  { name: '陕西省', selected: false, itemStyle: {areaColor: '#fad8e9'} },
  { name: '吉林省', selected: false, itemStyle: {areaColor: '#fce8cd'} },
  { name: '福建省', selected: false, itemStyle: {areaColor: '#fad8e8'} },
  { name: '贵州省', selected: false, itemStyle: {areaColor: '#fad8e8'} },
  { name: '广东省', selected: false, itemStyle: {areaColor: '#ddcfe8'} },
  { name: '青海省', selected: false, itemStyle: {areaColor: '#fad8e9'} },
  { name: '西藏自治区', selected: false, itemStyle: {areaColor: '#ddcfe6'} },
  { name: '四川省', selected: false, itemStyle: {areaColor: '#e4f1d5'} },
  { name: '宁夏回族自治区', selected: false, itemStyle: {areaColor: '#fefcd5'} },
  { name: '新疆维吾尔自治区', selected: false, itemStyle: {areaColor: '#fefcd5'} },
  { name: '海南省', selected: false, itemStyle: {areaColor: '#fad8e9'} },
  { name: '台湾省', selected: false, itemStyle: {areaColor: '#fce8cd'} },
  { name: '香港特别行政区', selected: false, itemStyle: {areaColor: '#dc9bbb'} },
  { name: '澳门特别行政区', selected: false, itemStyle: {areaColor: '#e0f7cc'} },
  { name: '南海诸岛', selected: false, itemStyle: {areaColor: '#dc9bbb'} }
]

/* 绘制图形 */
drawEcharts () {
  echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo)
  this.echartsObj = echarts.init(document.getElementById(this.id))
  let option = {
    tooltip: {
      formatter: (param) => {
        console.log(param)
        return 'kkk'
      }
    },
    geo: {
      map: this.mapType,
      zoom: 1,
      roam: false, // 鼠标滑动放大缩小
      itemStyle: {
        areaColor: '#f5f5f5',
        borderWidth: '.5',
        borderColor: '#999'
      }
    },
    series: [{
      type: 'map',
      map: this.mapType,
      itemStyle: {
        areaColor: '#f5f5f5',
        borderWidth: '.5',
        borderColor: '#999'
      },
      data: this.mapType === 'china' ? CONST_CHINA_REGION_COLOR : CONST_WORLD_REGION_COLOR // 彩色地图绘制
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      rippleEffect: {
        period: 4,
        brushType: 'stroke'
      },
      symbolSize: 10,
      itemStyle: {
        color: 'blue',
        opacity: 1
      },
      data: this.data
    }]
  }
  this.echartsObj.setOption(option)
}

注意

geo文件

V5移除了内置的geoJSON（原先在echarts/map文件夹下），这里引用的中国和世界地图的geoJSON是我从老的版本中复制出来的

git clone https://gitee.com/potatocoder/geo_json.git

地理名称一致

变量CONST_CHINA_REGION_COLOR中的地理位置需要跟geoJSON中的地理名称完全对应，否则也会匹配不到具体的地理位置