Vue引用echarts全国地图小记

import geoJson from '@/assets/js/china' // 从node_module包中找到echarts包中的全国地图的json数据文件，把它拉到本地引入
import 'echarts/map/js/china'  // 全国地图js文件
import 'echarts/lib/echarts' // 必须引入的echarts依赖文件
export default {
  name: 'echartMap',
  props: ['swipeRankList', 'defaultProvinceSwipe'],
  data () {
    return {
      loading: true
    }
  },
  mounted () {
    let echartsMap = null
    if (process.env.NODE_ENV === 'production') {
      echartsMap = echarts.init(document.getElementById('echartsMap'))
    } else {
      echartsMap = this.$echarts.init(document.getElementById('echartsMap'))
    }
    setTimeout(() => {  // 延迟加载地图
      this.getEcharts(echartsMap)
    }, 1000)
    window.addEventListener('resize', () => {  // echarts重绘，适配分辨率
      echartsMap.dispose() // 销毁当前地图
      setTimeout(() => {
        if (process.env.NODE_ENV === 'production') { // 判断是否生产环境
          echartsMap = echarts.init(document.getElementById('echartsMap')) // 新建地图
        } else {
          echartsMap = this.$echarts.init(document.getElementById('echartsMap')) // 新建地图
        }
        this.getEcharts(echartsMap)
      }, 300)
      echartsMap.resize()  // 适配
    }, false)
  },
  methods: {
    getEcharts (ele) {
      /* 获取地图数据 */
      let echartDataList = []
      echartDataList = this.swipeRankList
      let mapFeatures = geoJson.features
      let defaultProvinceSwipe = this.defaultProvinceSwipe || ''
      var newEchartDataList = []
      var timeTicket = null
     
      // mapFeatures地图所给全国数据（带定位），匹配需要的数据在地图上显示
      mapFeatures.forEach((v) => {
        // 地区名称
        let name = v.properties.name
        echartDataList.forEach(item => {
          if (item.name.search(name) !== -1) {
          // 所需显示数据
            newEchartDataList.push({
              name: name,
              bankName: item.name,
              value: item.newSwipe || 0,
              cp: v.properties.cp,
              dataIndex: item.rowNumber,
              incumbency: item.incumbency || 0,
              queryLevel: 1
            })
          }
        })
      })
      let option = {
        tooltip: {
          padding: 0,
          enterable: true,
          transitionDuration: 1,
          // 重点标记（可参考如下标记1详细解释）
          formatter: function (params) {
            let tipHtml = ''
            let tipName = params.data.bankName || params.data.name
            let tipIncumbency = params.data.incumbency || 0
            let tipValue = params.data.value || 0
            if (params.data) {
              tipHtml = '<div style="border-radius:5px;background:rgba(0, 0, 0, 0.3);padding: 0.25rem;font-size: 0.575rem;line-height: 1rem; color: #ffffff;display: flex;flex-direction: column;">' +
                '  <span>' + tipName + '</span>' +
                '  <span>本月累计新客首刷：' + tipValue + '人</span>' +
                '  <span>在职人数：' + tipIncumbency + '人</span>' +
                '</div>'
            }
            return tipHtml
          }
          
        },
        // echarts图与父框的边距
        grid: {
          borderWidth: 0,
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          containLabel: false
        },
        series: [{
          name: '邮储销售看板',
          type: 'map',
          mapType: 'china',
          zoom: 1.25, // 地图大小调整，注意：该设置只适用于 type：‘map’
          roam: false,
          // selectedMode: false,
          itemStyle: {
            normal: {
              borderColor: '#0075ff',
              areaColor: '#f9f9f9',
              label: {
                show: false
              }
            },
            emphasis: {
              areaColor: '#15ead9',
              label: {
                show: false
              }
            }
          },
          data: newEchartDataList
        }]
      }
      let dataNewList = option.series[0].data
      let dataIndex = 0
      let dataIndexFlag = 0
      let dataIndexOld = 0
      let dataIndexArr = []
      if (defaultProvinceSwipe === '' || defaultProvinceSwipe.length <= 0) {
        dataIndex = parseInt(Math.random() * dataNewList.length)
      } else {
        dataNewList.forEach((item, index) => {
          if (defaultProvinceSwipe.indexOf(item.name) >= 0) {
            dataIndexFlag++
            dataIndex = index
          }
        })
      }
      timeTicket && clearInterval(timeTicket)
      // 地图创建完成时，默认选中的区域，参数可参考echartsAPI
      timeTicket = setTimeout(() => {
        if (dataIndexFlag <= 0) {
          dataIndex = parseInt(Math.random() * dataNewList.length)
        }
        ele.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        })
        ele.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: dataIndex
        })
        ele.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: dataIndex
        })
      }, 300)
      
      // 地图区域点击事件
      ele.on('click', function (params) {
        dataIndexOld = dataIndexArr[dataIndexArr.length - 1]
        dataNewList.forEach((item, index) => {
          if (item.dataIndex === params.data.dataIndex) {
            dataIndex = index
            dataIndexArr.push(dataIndex)
          }
        })
        ele.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: dataIndexOld
        })
        ele.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: dataIndex
        })
        ele.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: dataIndex
        })
      })
      this.loading = false
      ele.setOption(option)
    }
  }
}

标记1：（如需要可复制）
若当前项目中后台给的数据与地图默认给的数据不同且有多余的，又不想去操作多余的地区则可以使用该方法，但注意控制台会报错，无需紧张，那是获取不到数据而引起的，这个报错无关紧要，若无报错更好

import geoJson from '@/assets/js/china' // 从node_module包中找到echarts包中的全国地图的json数据文件，把它拉到本地引入
import 'echarts/map/js/china'  // 全国地图js文件
import 'echarts/lib/echarts' // 必须引入的echarts依赖文件

let mapFeatures = geoJson.features

// mapFeatures地图所给全国数据（带定位），匹配需要的数据在地图上显示
      mapFeatures.forEach((v) => {
        // 地区名称
        let name = v.properties.name
        echartDataList.forEach(item => {
          if (item.name.search(name) !== -1) {
          // 所需显示数据
            newEchartDataList.push({
              name: name,
              bankName: item.name,
              value: item.newSwipe || 0,
              cp: v.properties.cp,
              dataIndex: item.rowNumber,
              incumbency: item.incumbency || 0,
              queryLevel: 1
            })
          }
        })
      })