echarts实现地图展示

1.获取对应的区域的地图，可以在阿里云数据可视化平台获取地图文件：DataV.GeoAtlas地理小工具系列2.下载json文件引入注册，代码如下

<template>
  <div>
    <div ref="echarts" style="width: 500px; height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import allAddress from '../../utils/allAddress.json' // 在阿里云数据可视化平台获取全国地图，然后下载json文件引入注册
import city from '../../utils/city' // 全国各市名称，经纬度
export default {
  data() {
    return {
      date: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.play_echarts()
    })
  },
  methods: {
    play_echarts() {
      var data = [
        {
          name: '武汉市',
          value: 20
        },
        {
          name: '芜湖市',
          value: 10
        },
        {
          name: '成都市',
          value: 20
        }
      ]
      var geoCoordMap = city.city
      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      const myChart = echarts.init(this.$refs.echarts)
      echarts.registerMap('china', { geoJSON: allAddress }) // 注册地图
      const option = {
        backgroundColor: '#d3e3fd', // 设置地图画布的背景色
        tooltip: {
          extraCssText: 'border:none', //  消除提示框颜色
          trigger: 'item',
          formatter: function (params) {
            return params.name + ' : ' + params.value[2]
          }
        },
        geo: {
          map: 'china',
          roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
          zoom: 1, // 当前视角的缩放比例
          silent: true, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。鼠标划过区块的颜色不生效
          aspectScale: 1, // 长宽比,1的含义为长宽一样,假如高为100,宽也为100;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          label: {
            show: false, // 是否地图显示区域的文字，各省市的名字
            fontSize: '14px',
            color: '#49546B'
          },
          itemStyle: {
            normal: {
              borderColor: '#c3c8c9', // 图形的描边颜色
              borderWidth: 1.5, // 描边线宽。为 0 时无描边。
              areaColor: '#e8f2f5' // 地图区域的颜色
            },
            emphasis: {
              // 鼠标移上去区块的颜色
              areaColor: 'red',
              borderWidth: 0
            }
          }
        },
        series: [
          {
            type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）
            coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
            data: convertData(data),
            symbolSize: function (val) {
              //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
              return val[2] / 2 //  值的大小除一个数，改变标记点的大小
            },
            rippleEffect: {
              //涟漪特效相关配置。
              period: 4, //动画的时间。
              scale: 2.5, //动画中波纹的最大缩放比例。
              brushType: 'stroke' //波纹的绘制方式，可选 'stroke' 和 'fill'。
            },
            hoverAnimation: true, // 是否开启鼠标 hover 的提示动画效果。
            label: {
              normal: {
                formatter: '{b}',
                position: 'top', // 显示位置
                show: false // 是否显示城市名标签名称
              }
            },
            itemStyle: {
              normal: {
                color: '#57cef7', // 图形样式颜色
                shadowBlur: 10, // 设置阴影的模糊度
                shadowColor: '#333' // 阴影颜色
              }
            },
            zlevel: 1
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>

3.实现效果如下：