Vue组件首先需要引入echarts包和中国地图数据，

import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

有几点需要注意：
1.地图中需要的json数据需要包含主要：name:"省份名称必须为简称（如：陕西），不能带“省”字“,value:坐标（可以为省会的坐标）；

2.组件接收数据的时候需要对数据进行监听（watch: {}）;
以下为具体代码（其中包含我的项目中一些业务逻辑，及触发事件仅供参考）：
这里简述一下大概的业务：该组件包含：中国地图并显示每个省份的业务数量，要有冒泡效果和鼠标移动效果，事件：点击有业务数量的省份时页面右下方展示该省份项目信息，用户再次点击项目信息便可跳转到相应的页面。下面截图：

正文：
HTML部分：

<template>
  <div class='echarts'>
    <div class="map-china3" v-if="!isShangTou">
      <el-card shadow="always" body-style="padding: 10px;height: 150px;">
        <h4 class="h4-css-map">新加坡</h4>
        <hr class="hr-css-map">
        <div @click="singaporeProList('新加坡')">
          <el-tooltip class="tool-item" effect="dark" placement="top">
            <div slot="content">在建项目数量<br />新加坡 : {{singaporeNum}}</div>
            <div style='position:relative; width:150px; height:100px;padding-top:40px;'>
              <div style='position:absolute; z-index:2; '>
                <svg-icon icon-class="singapore"></svg-icon>
              </div>
            <div v-if="this.singaporeNum != 0" >
            <div style='position:absolute; z-index:3;'><img style="padding-left: 60px; padding-top: 45px;" src="@/assets/company/point.png"></div>
              <div style='position:absolute; z-index:4;'>
            <div style="padding-top: 42px; padding-left: 62px; font-size: 15px; color: #eee;">{{singaporeNum}}</div>
              </div>
            </div>
            </div>
          </el-tooltip>
        </div>
      </el-card>
    </div>
    <div class="map-layer" id="map" :style="{height:'900px',width:'100%',top:'-90px',}" ref='myEchart'></div>
    <div class="map-projects">
      <div class="projectList">
        <el-card shadow="always" body-style="padding: 10px;">
          <h4 class="h4-css-font">选择{{projectName}}地区项目</h4>
          <hr class="hr-css-map-project">
          <ul v-if="projectLists.length > 0">
            <li v-for="(item,index) of projectLists" :key="index" style="font-size: 15px;">
              <svg-icon icon-class="tagtwo" class="icon-css-public" />
              <a @click="toProject(item.projectid,item.projectname)" type="font-size: 8px;" :title="formatTitle(item.projectname)">{{formatName(item.projectname)}}</a>
            </li>
          </ul>
          <ul v-else>
            <li class="none">
              暂无数据
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>

Javascript部分：

<script>
import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
import logo from '../../assets/company/icrelogo.png'
import {
  getToken,
  setAuthType,
  setToken,
  setLineId,
  setArea,
  setSectionLine,
  setSectionId
} from '@/utils/auth'
import { getSectionLineDataByProId } from '../../api/company/comIndex'
export default {
  name: 'echarts',
  props: ['userJson', 'mapDatas', 'messageList'],

  created() {
    const data = JSON.parse(getToken())
    if (data.code === 'wangyi') {
      this.isShangTou = true
    }
  },
  watch: {
    mapDatas(curVal, oldVal) {
      var _this = this
      for (var i = 0; i < _this.mapDatas.length; i++) {
        var count = _this.mapDatas[i].projectlist.length
        for (var j = 0; j < _this.dataqi.length; j++) {
          if (_this.dataqi[j].name === _this.mapDatas[i].name) {
            _this.dataqi[j].value.push(count)
            _this.dataqi[j].value.push('在建项目数量')
            _this.dataqi[j].tooltip = _this.dataqi[j].name + ': ' + count
            _this.dataqi[j].project = _this.mapDatas[i].projectlist
            _this.dataqi2.push(_this.dataqi[j])
          }
        }
        if (_this.mapDatas[i].name === '新加坡') {
          _this.singaporeNum = count
        }
        _this.mapData.push({
          name: _this.mapDatas[i].name,
          value: count,
          project: _this.mapDatas[i].projectlist
        })
      }
      for (var k = 0; k < _this.dataqi.length; k++) {
        for (var n = 0; n < _this.mapDatas.length; n++) {
          if (_this.dataqi[k].name !== _this.mapDatas[n].name) {
            _this.mapData.push({
              name: _this.dataqi[k].name,
              value: 0,
              project: []
            })
          }
        }
      }

      if (curVal) {
        _this.chinaConfigure()
      }
    },
    projectLists(curVal, oldVal) {
      if (curVal) {
        this.chinaConfigure()
      }
    }
  },
  methods: {
    formatName(projectname) {
      if (projectname.length > 10) {
        return projectname.substring(0, 10) + '...'
      }
      return projectname
    },
    formatTitle(title) {
      return '点击进入 ' + title
    },
    singaporeProList(str) {
      var _this = this
      _this.projectLists = []
      for (var i = 0; i < _this.mapDatas.length; i++) {
        _this.projectName = str
        if (_this.mapDatas[i].name === str) {
          _this.projectLists = _this.mapDatas[i].projectlist
        }
      }
    },
    toProjectOpen() {
      setAuthType('project')
      const str = location.href.split('#')[0]
      window.open(`${str}#/project/projectinfo?type=1`)
    },
    toProject: function(projectId, projectName) {
      var _this = this
      var toKenData = JSON.parse(getToken())
      toKenData.project_id = projectId
      toKenData.project_name = projectName
      setToken(JSON.stringify(toKenData))
      getSectionLineDataByProId(toKenData.token, projectId).then(response => {
        if (response.data.code === 1) {
          setArea(JSON.stringify(response.data.data))
          var sections = response.data.data.section
          var sectionId
          var sectionLine
          var lineId
          if (sections.length > 0) {
            for (var i = 0; i < sections.length; i++) {
              if (sections[i].line.length > 0) {
                for (var k = 0; k < sections[i].line.length; k++) {
                  if (sections[i].line[k].lineId !== '') {
                    lineId = sections[i].line[k].lineId
                    sectionLine =
                      sections[i].sectionName +
                      ' / ' +
                      sections[i].line[k].lineName
                    sectionId = sections[i].sectionId
                    break
                  }
                }
              }
              setSectionId(sectionId)
              setSectionLine(sectionLine)
              setLineId(lineId)
              _this.toProjectOpen()
              break
            }
          } else {
            _this.toProjectOpen()
          }
        }
      })
    },
    mapFeatures: function() {
      return echarts.getMap('china').geoJson.mapFeatures
    },
    chinaConfigure() {
      const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
      window.onresize = myChart.resize
      myChart.setOption({
        // 进行相关配置
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        title: {
          text: '',
          subtext: '',
          x: 'right',
          textStyle: {
            color: 'rgb(55, 75, 113)',
            fontFamily: '等线',
            fontSize: '15'
          },
          subtextStyle: {
            fontSize: '15',
            fontFamily: '18'
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 10,
          text: ['高', '低'],
          calculable: true,
          inRange: {
            color: ['#6A9DFF', 'blue']
          }
        },
        geo: {
          // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: false, // 支持扩大缩小
          label: {
            normal: {
              show: false, // 是否显示对应地名
              textStyle: {
                color: '#FFFFFF',
                fontSize: 15
              }
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.6,
                r: 2.2,
                colorStops: [
                  {
                    offset: 1,
                    color: '#6A9DFF' // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: '#6A9DFF' // 100% 处的颜色
                  }
                ],
                globalCoord: false
              },
              borderColor: '#D3D3D3' // 鼠标移动到省份边框颜色
            },
            emphasis: {
              areaColor: 'rgba(39, 17, 235, 0.5)', // 鼠标移动到省份显示的颜色
              shadowBlur: 15,
              borderWidth: 1,
              shadowColor: 'rgba(39, 17, 235, 0.5)' // 鼠标移动地图周围阴影
            }
          }
        },
        series: [
          {
            name: '在建项目数量', // 浮动框的标题
            type: 'map',
            geoIndex: 0,
            data: this.mapData
          },
          {
            name: '在建项目数量',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.dataqi2,
            symbolSize: function(val) {
              var sizeb = val[2] * val[2] / 6 + 8
              if (sizeb > 20) {
                sizeb = 20
              }
              return sizeb
            },
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                color: '#00FFFF',
                fontSize: 15
              }
            },
            itemStyle: {
              normal: {
                color: 'yellow'
              }
            }
          },
          {
            name: '在建项目数量',
            type: 'scatter',
            symbol: 'pin',
            coordinateSystem: 'geo',
            data: this.dataqi2,
            symbolSize: function(val) {
              var sizeb = val[2] * 3.5 + 20
              if (sizeb > 50) {
                sizeb = 50
              }
              return sizeb
            },
            label: {
              normal: {
                formatter: '{@[2]}',
                textStyle: {
                  color: '#FFF',
                  fontSize: 16
                },
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#F62157',
                show: true
              }
            }
          }
        ]
      })
      var adm = this
      myChart.on('click', function(params) {
        if (!params.data.project === null) {
          adm.projectName = params.name
          adm.projectLists = []
        } else {
          adm.projectName = params.name
          adm.projectLists = params.data.project
        }
      })
    }
  },
  data() {
    return {
      skipType: 0,
      imgUrl: logo,
      isShangTou: false,
      chart: null,
      mapData: [],
      projectLists: [],
      projectName: '省市',
      activeName: '1',
      dataqi: [
        {
          name: '新疆',
          value: [87.500966, 43.983832],
          tooltip: '',
          project: []
        },
        {
          name: '西藏',
          value: [90.959657, 29.881987],
          tooltip: '',
          project: []
        },
        {
          name: '青海',
          value: [101.703679, 36.733408],
          tooltip: '',
          project: []
        },
        {
          name: '甘肃',
          value: [103.764176, 36.198433],
          tooltip: '',
          project: []
        },
        {
          name: '内蒙古',
          value: [111.711808, 40.98898],
          tooltip: '',
          project: []
        },
        {
          name: '宁夏',
          value: [106.192619, 38.605171],
          tooltip: '',
          project: []
        },
        {
          name: '四川',
          value: [103.984944, 30.712171],
          tooltip: '',
          project: []
        },
        {
          name: '云南',
          value: [102.733927, 25.025991],
          tooltip: '',
          project: []
        },
        {
          name: '陕西',
          value: [109.491289, 34.455365],
          tooltip: '',
          project: []
        },
        {
          name: '山西',
          value: [111.84183, 37.510421],
          tooltip: '',
          project: []
        },
        {
          name: '重庆',
          value: [106.413387, 29.689402],
          tooltip: '',
          project: []
        },
        {
          name: '贵州',
          value: [106.560565, 26.756654],
          tooltip: '',
          project: []
        },
        {
          name: '广西',
          value: [108.326706, 22.99805],
          tooltip: '',
          project: []
        },
        {
          name: '海南',
          value: [110.129641, 20.14162],
          tooltip: '',
          project: []
        },
        {
          name: '广东',
          value: [113.183592, 23.202287],
          tooltip: '',
          project: []
        },
        {
          name: '澳门',
          value: [113.551538, 22.109432],
          tooltip: '',
          project: []
        },
        {
          name: '香港',
          value: [114.066662, 22.588638],
          tooltip: '',
          project: []
        },
        {
          name: '台湾',
          value: [121.49917, 25.12653],
          tooltip: '',
          project: []
        },
        {
          name: '福建',
          value: [119.107522, 26.193691],
          tooltip: '',
          project: []
        },
        {
          name: '江西',
          value: [115.722419, 28.882959],
          tooltip: '',
          project: []
        },
        {
          name: '湖南',
          value: [112.778851, 28.363482],
          tooltip: '',
          project: []
        },
        {
          name: '湖北',
          value: [114.177046, 30.743959],
          tooltip: '',
          project: []
        },
        {
          name: '安徽',
          value: [117.120614, 31.943998],
          tooltip: '',
          project: []
        },
        {
          name: '浙江',
          value: [119.990592, 30.361806],
          tooltip: '',
          project: []
        },
        {
          name: '江苏',
          value: [118.665986, 32.194658],
          tooltip: '',
          project: []
        },
        {
          name: '河南',
          value: [113.441154, 34.8448],
          tooltip: '',
          project: []
        },
        {
          name: '山东',
          value: [116.973435, 36.763019],
          tooltip: '',
          project: []
        },
        {
          name: '上海',
          value: [121.315197, 31.314325],
          tooltip: '',
          project: []
        },
        {
          name: '河北',
          value: [114.397814, 38.170754],
          tooltip: '',
          project: []
        },
        {
          name: '天津',
          value: [117.194203, 39.180291],
          tooltip: '',
          project: []
        },
        {
          name: '北京',
          value: [116.384722, 39.977552],
          tooltip: '',
          project: []
        },
        {
          name: '辽宁',
          value: [123.412489, 41.875105],
          tooltip: '',
          project: []
        },
        {
          name: '吉林',
          value: [125.252219, 43.850841],
          tooltip: '',
          project: []
        },
        {
          name: '黑龙江',
          value: [126.503235, 45.865719],
          tooltip: '',
          project: []
        }
      ],
      dataqi2: [],
      singaporeNum: 0
    }
  }
}
</script>

style部分：

<style rel='stylesheet/scss' lang='scss' scoped>
.map-china {
  color: rgba(0, 0, 0, 0);
}
.map-china3 {
  position: absolute;
  z-index: 1;
  opacity: 0.9;
  left: 9%;
  bottom: -680px;
  font-size: 150px;
}
.map-layer {
  position: absolute;
  left: 10px;
  top: -40px;
  width: 10px;
}
.map-projects {
  position: absolute;
  z-index: 1;
  opacity: 1;
  height: 160px;
  right: 0px;
  bottom: 0px;
  top: 500px;
}
.projectList {
  position: absolute;
  right: 20px;
  bottom: -20px;
  width: 220px;
  border-radius: 12px;
}
.projectList ul {
  background-color: rgb(255, 255, 255);
  list-style: none;
  margin: 5px;
  padding: 0px;
  border-radius: 3px;
}
.projectList ul li {
  line-height: 30px;
  text-align: left;
  width: 100%;
}
.projectList ul li a {
  color: #7c8286;
}
.projectList ul li.none {
  color: #7c8286;
  text-align: center;
  font-size: 15px;
}
.hr-css-map {
  margin-top: 0px;
  margin-bottom: -50px;
  border: 0;
  border-top: 1px solid #eee;
}
.hr-css-map-project {
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0;
  border-top: 1px solid #eee;
}
.icon-css-public {
  width: 15px;
  height: 15px;
  color: rgb(63, 86, 192);
}
.h4-css-map {
  margin-top: -5px;
  margin-bottom: 5px;
  font-size: 15px;
}
.tool-item {
  margin: 4px;
  font-size: 15;
}
</style>