参考文档

使用echarts完成中国省市区县镇地图展示
echarts地图（中国地图展示各省数据）
echarts实现中国地图区域分布图 vue + echarts
利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果
可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据
vue使用echarts来绘制中国地图下钻省市区县级地图
Echarts地图详解（地图样式、合并地图、增加地图）

Echarts使用百度地图服务

降水量案例（使用geoJson数据绘制地图）

效果图

安装 ECharts

npm install echarts --save

方法一：全局注册

在main.js全局注册

const echarts = require('echarts')

Vue.prototype.$echarts = echarts

组件使用

var myChart = this.$echarts.init(document.getElementById('myChart'));
myChart.setOption(this.option);

方法二：组件直接引用

组件使用

import * as echarts from 'echarts';

var chinaChart = echarts.init(
  document.getElementById("mapContain")
);
chinaChart.setOption(this.option);

注：下面用的方法即组件直接引用

地图geoJson数据引用

1、获取地图数据
dataV地图数据下载地址
网友分享json文件

2、组件引用（常用两种文件.js或者.json）

//import china from '@/config/china.js'
import china from '@/config/china.json'

3、ECharts地图注册

echarts.registerMap('china', china)

绘制中国地图

  mounted () {
    this.drawMap()
  },
  methods: {
    drawMap () {
      echarts.registerMap('china', china)
      var chinaChart = echarts.init(
        document.getElementById("mapContain")
      );
      chinaChart.setOption(this.option);
    }
  }

  data () {
    return {
      option: {
        // geo: {
        //   map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
        //   roam: true, //缩放
        //   label: { show: true }, //是否显示省份名称
        //   zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
        // },

        //鼠标移上去时显示悬浮框
        tooltip: {
          backgroundColor: '#92DCC6',
          padding: 0,
          trigger: 'item',//设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
          //模板字符串渲染悬浮框，注意图片的引入方式（require）,否则无法显示。
          formatter: (params) => {
            console.log(params)
            let obj = { img: require('@/assets/logo.png') }
            return `<div style="text-align: center;">
                      <img src=${obj.img}/>
                      <p>${params.name}</p>
                      <p>${params.value}</p>
                    <div>`
          },
        },
        
        // 视觉映射组件
        visualMap: [{
          type: 'continuous',//类型为连续型
          min: 0,
          max: 1000,
          // range: [100, 400],
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],//取值范围的文字
          textStyle: {
            color: "#fff"
          },
          inRange: {
            color: ['#e0ffff', '#006edd']//取值范围的颜色
          },
        }],

        series: [{
          type: 'map',
          name: "降水量",
          map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
          roam: true, //缩放
          zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
          label: {
            show: true,//是否显示省份名称
            color: "#fff"
          },
          itemStyle: {
            areaColor: '#AAD5FF',//地图区域背景颜色
            borderColor: '#fff'//地图边界颜色
          },
          //高亮时的设置
          emphasis: {
            //高亮时地图区域背景颜色
            itemStyle: {
              areaColor: 'pink',
            },
            //文字颜色，样式在此处
            label: {
              color: '#fff'
            }
          },
          // 数据
          data: [
            { name: "北京", value: Math.round(Math.random() * 1000) },
            { name: "天津", value: Math.round(Math.random() * 1000) },
            { name: "上海", value: Math.round(Math.random() * 1000) },
            { name: "重庆", value: Math.round(Math.random() * 1000) },
            { name: "河北省", value: Math.round(Math.random() * 1000) },
            { name: "河南省", value: Math.round(Math.random() * 1000) },
            { name: "云南省", value: Math.round(Math.random() * 1000) },
            { name: "辽宁省", value: Math.round(Math.random() * 1000) },
            { name: "黑龙江省", value: Math.round(Math.random() * 1000) },
            { name: "湖南省", value: Math.round(Math.random() * 1000) },
            { name: "安徽省", value: Math.round(Math.random() * 1000) },
            { name: "山东省", value: Math.round(Math.random() * 1000) },
            { name: "江苏省", value: Math.round(Math.random() * 1000) },
            { name: "浙江省", value: Math.round(Math.random() * 1000) },
            { name: "江西省", value: Math.round(Math.random() * 1000) },
            { name: "湖北省", value: Math.round(Math.random() * 1000) },
            { name: "甘肃省", value: Math.round(Math.random() * 1000) },
            { name: "山西省", value: Math.round(Math.random() * 1000) },

            { name: "陕西省", value: Math.round(Math.random() * 1000) },
            { name: "吉林省", value: Math.round(Math.random() * 1000) },
            { name: "福建省", value: Math.round(Math.random() * 1000) },
            { name: "贵州省", value: Math.round(Math.random() * 1000) },
            { name: "广东省", value: Math.round(Math.random() * 1000) },
            { name: "青海省", value: Math.round(Math.random() * 1000) },
            { name: "四川省", value: Math.round(Math.random() * 1000) },
            { name: "海南省", value: Math.round(Math.random() * 1000) },

            { name: "西藏", value: Math.round(Math.random() * 1000) },
            { name: "宁夏", value: Math.round(Math.random() * 1000) },
            { name: "新疆", value: Math.round(Math.random() * 1000) },
            { name: "内蒙古", value: Math.round(Math.random() * 1000) },
            { name: "广西", value: Math.round(Math.random() * 1000) },

            { name: "台湾省", value: Math.round(Math.random() * 1000) },
            { name: "香港", value: Math.round(Math.random() * 1000) },
            { name: "澳门", value: Math.round(Math.random() * 1000) }
          ],
          // 数据映射  同china文件中的name进行映射
          nameMap: {
            "北京市": "北京",
            "天津市": "天津",
            "上海市": "上海",
            "重庆市": "重庆",
            "西藏自治区": "西藏",
            "宁夏回族自治区": "宁夏",
            "新疆维吾尔自治区": "新疆",
            "内蒙古自治区": "内蒙古",
            "广西壮族自治区": "广西",
          },
        }],
      }
    }
  },

降水量案例完整代码

<template>
  <div class="home">
    <div id="mapContain"
         style="width:1000px;height:800px;background-color:#050512;"></div>
  </div>
</template>

<script>
import china from '@/config/china.js'
// import china from '@/config/china.json'
import * as echarts from 'echarts';
export default {
  components: {},
  data () {
    return {
      option: {
        // geo: {
        //   map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
        //   roam: true, //缩放
        //   label: { show: true }, //是否显示省份名称
        //   zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
        // },

        //鼠标移上去时显示悬浮框
        tooltip: {
          backgroundColor: '#92DCC6',
          padding: 0,
          trigger: 'item',//设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
          //模板字符串渲染悬浮框，注意图片的引入方式（require）,否则无法显示。
          formatter: (params) => {
            console.log(params)
            let obj = { img: require('@/assets/logo.png') }
            return `<div style="text-align: center;">
                      <img src=${obj.img}/>
                      <p>${params.name}</p>
                      <p>${params.value}</p>
                    <div>`
          },
        },
        
        // 视觉映射组件
        visualMap: [{
          type: 'continuous',//类型为连续型
          min: 0,
          max: 1000,
          // range: [100, 400],
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],//取值范围的文字
          textStyle: {
            color: "#fff"
          },
          inRange: {
            color: ['#e0ffff', '#006edd']//取值范围的颜色
          },
        }],

        series: [{
          type: 'map',
          name: "降水量",
          map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
          roam: true, //缩放
          zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
          label: {
            show: true,//是否显示省份名称
            color: "#fff"
          },
          itemStyle: {
            areaColor: '#AAD5FF',//地图区域背景颜色
            borderColor: '#fff'//地图边界颜色
          },
          //高亮时的设置
          emphasis: {
            //高亮时地图区域背景颜色
            itemStyle: {
              areaColor: 'pink',
            },
            //文字颜色，样式在此处
            label: {
              color: '#fff'
            }
          },
          // 数据
          data: [
            { name: "北京", value: Math.round(Math.random() * 1000) },
            { name: "天津", value: Math.round(Math.random() * 1000) },
            { name: "上海", value: Math.round(Math.random() * 1000) },
            { name: "重庆", value: Math.round(Math.random() * 1000) },
            { name: "河北省", value: Math.round(Math.random() * 1000) },
            { name: "河南省", value: Math.round(Math.random() * 1000) },
            { name: "云南省", value: Math.round(Math.random() * 1000) },
            { name: "辽宁省", value: Math.round(Math.random() * 1000) },
            { name: "黑龙江省", value: Math.round(Math.random() * 1000) },
            { name: "湖南省", value: Math.round(Math.random() * 1000) },
            { name: "安徽省", value: Math.round(Math.random() * 1000) },
            { name: "山东省", value: Math.round(Math.random() * 1000) },
            { name: "江苏省", value: Math.round(Math.random() * 1000) },
            { name: "浙江省", value: Math.round(Math.random() * 1000) },
            { name: "江西省", value: Math.round(Math.random() * 1000) },
            { name: "湖北省", value: Math.round(Math.random() * 1000) },
            { name: "甘肃省", value: Math.round(Math.random() * 1000) },
            { name: "山西省", value: Math.round(Math.random() * 1000) },

            { name: "陕西省", value: Math.round(Math.random() * 1000) },
            { name: "吉林省", value: Math.round(Math.random() * 1000) },
            { name: "福建省", value: Math.round(Math.random() * 1000) },
            { name: "贵州省", value: Math.round(Math.random() * 1000) },
            { name: "广东省", value: Math.round(Math.random() * 1000) },
            { name: "青海省", value: Math.round(Math.random() * 1000) },
            { name: "四川省", value: Math.round(Math.random() * 1000) },
            { name: "海南省", value: Math.round(Math.random() * 1000) },

            { name: "西藏", value: Math.round(Math.random() * 1000) },
            { name: "宁夏", value: Math.round(Math.random() * 1000) },
            { name: "新疆", value: Math.round(Math.random() * 1000) },
            { name: "内蒙古", value: Math.round(Math.random() * 1000) },
            { name: "广西", value: Math.round(Math.random() * 1000) },

            { name: "台湾省", value: Math.round(Math.random() * 1000) },
            { name: "香港", value: Math.round(Math.random() * 1000) },
            { name: "澳门", value: Math.round(Math.random() * 1000) }
          ],
          // 数据映射  同china文件中的name进行映射
          nameMap: {
            "北京市": "北京",
            "天津市": "天津",
            "上海市": "上海",
            "重庆市": "重庆",
            "西藏自治区": "西藏",
            "宁夏回族自治区": "宁夏",
            "新疆维吾尔自治区": "新疆",
            "内蒙古自治区": "内蒙古",
            "广西壮族自治区": "广西",
          },
        }],
      }
    }
  },
  mounted () {
    this.drawMap()
  },
  methods: {
    drawMap () {
      echarts.registerMap('china', china)
      var chinaChart = echarts.init(
        document.getElementById("mapContain")
      );
      chinaChart.setOption(this.option);
    }
  }
};
</script>