echart地图加载中国地图，可切换省市地图

前提：vue文件
（代码并不完整，仅参考）

echartMapData是个全局对象，在index.html被引入

参考代码

<script src="./js/echarts/echartMapData.js"></script>

data () {
	return {
		// 地图echart对象
      echartMap: null,
      // 地图类型
      mapType: 'china',
      // 地图级别：0-中国地图，1-省份地图
      mapLevel: 0,
	}
},
mounted () {
    this.echartMap = this.$echarts.init(this.$refs.echartMap, null, { renderer: 'svg' })
},
watch: {
// 视窗变化
 resizeFlag (newVal) {
      this.echartMap.resize()
    }
},
methods: {
  setEchartMap (mapData = []) {
      this.echartMap = this.$echarts.init(this.$refs.echartMap, null, { renderer: 'svg' })
      this.$echarts.registerMap('china', echartMapData.china)
      this.updateMapOption(mapData)
    },
     // 更新地图数据参数
    updateMapOption (mapData = []) {
      // 当前销量总和
      let outSellAmountSum = 0
      // 数据长度
      let dataLength = mapData.length
      mapData.forEach(item => { outSellAmountSum += item.outSellAmount })

      const seriesData = mapData.map((item, index) => {
        return {
          name: item.name.replace(/内蒙区/g, '内蒙古').replace(/省|市|区/g, ''),
          id: item.code,
          value: [
            (item.outSellAmount / amountUnit.value).toFixed(2) || '-',
            item.outSellAmountYoy || '-',
            outSellAmountSum ? (item.outSellAmount / outSellAmountSum * 100).toFixed(2) : '-'
          ],
          index,
          color: index < 3 ? this.mapBg[2]
            : index > (dataLength - 3) ? this.mapBg[0] : this.mapBg[1]
        }
      })
      let bottom = 3 * parseInt(window.getComputedStyle(document.documentElement).fontSize)
      const optionMap = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255, 255, 255, 1)',
          borderColor: 'rgba(255, 174, 92, 1)',
          borderWidth: '2px',
          textStyle: {
            color: '#000'
          },
          formatter: function (params) {
            if (!params.data) return ''
            return `${params.data.name}<br>
              销量：${params.data.value[0]}万箱<br>
              同比增长：${params.data.value[1]}%<br>
              销量份额：${params.data.value[2]}%`
          }
        },
        visualMap: [
          {
            show: seriesData.length > 7,
            type: 'piecewise',
            bottom: 48 + bottom,
            left: 0,
            splitNumber: 3,
            pieces: seriesData.length > 7 ? [
              { gt: seriesData[dataLength - 4].value[0], label: '前三名', symbol: 'rect' },
              {
                gt: seriesData[3].outSellAmount,
                lte: seriesData[dataLength - 4].value[0],
                label: '中间'
              },
              { lt: seriesData[3].value[0], label: '后三名' }
            ] : [],
            textStyle: { color: '#ffffff', textBorderColor: '#FFFFFF' },
            realtime: false,
            dimension: 0,
            calculable: false,
            inRange: {
              color: ['#065475', '#04869E', '#02CFD8'],
              opacity: 0.7
            }
          },
          {
            show: true,
            type: 'piecewise',
            bottom: bottom,
            left: 0,
            splitNumber: 2,
            pieces: [
              { gt: '0.00', label: '同比增长' + (this.mapLevel ? this.cityIncrease : this.provIncrease) + '个' + (this.mapLevel ? '地市' : '省份'), symbol: 'rect' },
              { lt: '0.00', label: '同比下降' + (this.mapLevel ? this.cityDecrease : this.provDecrease) + '个' + (this.mapLevel ? '地市' : '省份') }
            ],
            textStyle: { color: '#ffffff', textBorderColor: '#FFFFFF' },
            dimension: 1,
            inRange: {
              opacity: 0.7
            }
          }

        ],
        series: [
          {
            name: '省份地图',
            roam: false,
            type: 'map',
            mapType: this.mapType, // 自定义扩展图表类型
            nameProperty: 'name',
            data: seriesData
            // 自定义名称映射
          }
        ]
      }

      this.echartMap.setOption(optionMap)
    },
      // 更新图表数据(被调用的方法)
    updateEchart () {
      if (this.market) {
        let provCode = this.market
        if (this.market.substr(2, 4) !== '0000') provCode = this.market.substr(0, 2) + '0000'

        // 四个直辖市的省份级别的code,依次是北京，天津，上海，重庆
        const municipalityCode = ['110000', '120000', '310000', '500000']
        const map = echartMapData.province[provCode]
        let features = []
        if (municipalityCode.includes(provCode)) {
          features = map.features
        } else {
          features = Enumerable.from(map.features)
            .join(this.cityList, '$.id ?$.id.substr(0,5):""', '$.cityCode.substr(2,5)', (a, b) => {
              a.properties.name = b.cityName
              return a
            }).distinct('$.id').toArray()
        }
        if (features.length === 0) {
          return
        }
        map.features = features

        this.mapType = this.market
        this.$echarts.registerMap(this.mapType, echartMapData.province[provCode])
        this.$echarts.registerMap(this.mapType, map)
        this.$nextTick(() => {
          const seriesData = this.filterCityDataList(this.market)
          // 更新地图参数
          this.updateMapOption(seriesData)
          // 重新设置柱状图参数
          this.setEchartBar(seriesData)
        })
        this.mapLevel = 1
      } else {
        this.mapType = 'china'
        this.$echarts.registerMap('china', echartMapData.china)
        this.$nextTick(() => {
          const seriesData = this.filterProvDataList()
          // 更新地图参数
          this.updateMapOption(seriesData)
          // 重新设置柱状图参数
          this.setEchartBar(seriesData)
        })
        this.mapLevel = 0
      }
    },
}