Vue Echarts 绘制中国地图

1.在main.js引入echarts

import echarts from 'echarts'
// 还要特别引入china.json，这样中国地图才会出现，不然只会出现右下角的南海诸岛
import china from './assets/utils/china.json'
Vue.prototype.$echarts = echarts
echarts.registerMap('china', china)

china.json是注册地图的数据源，自行百度下载！！！

2.html

<div id="map-content" class="map" ref="map-content"></div>

3.option

      mapOption: {
        tooltip: {
          trigger: 'item',
          backgroundColor: '#f08519',
          formatter: this.shareMapTooltip
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['']
        },
        dataRange: { // 地图颜色深浅
          orient: 'horizontal',
          min: 0,
          max: 8000,
          show: false
        },
        selectedMode: 'single',
        series: [
          {
            name: '',
            type: 'map',
            mapType: 'china',
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            showLegendSymbol: true,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: []
          }
        ]
      },

data格式为[{name: '北京', value: 10}, {name: '深圳', value: 10}, {name: '广州', value: 10}]
shareMapTooltip()为鼠标进入展示信息，可自定义。

4.js

 var mapChina = this.$echarts.init(document.getElementById('map-content'))
      mapChina.setOption(this.mapOption, true)