以吉林省为例

 1.下载json文件

首先获取文件，将省份对应的json文件下载下来放到项目文件中，建议放到public里，

2.引入echarts

import * as echarts from 'echarts'

3.准备dom容器

<div id="area"></div>

 4.本地发起axios请求,需要 npm install axios --save axios ，然后引入

import axios from 'axios'
import Vue from 'vue'
Vue.prototype.$axios = axios

5.实现方法

getArea () {
      const myChart = echarts.init(document.getElementById('area'))
      this.$axios.get('http://localhost:8999/jilin.json').then(ret => {
//防止本地发起axios出现跨域问题，需要写成http://localhost:8999/jilin.json
        echarts.registerMap('jilin', ret.data)
        // 注册矢量地图数据
        var option = {
          visualMap: { // 视觉映射组件
            show: true,
            inverse: true, // 反转
            top: '70%',
            bottom: '2%',
            left: '2%',
            textStyle: {
              fontsize: 12
            },
            splitList: [ // 自定义范围
              { start: 0, end: 100 },
              { start: 100, end: 300 },
              { start: 300, end: 500 },
              { start: 500, end: 1000 },
              { start: 1000 }
            ],
            color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'] //自定义范围的颜色
          },
          tooltip: { // 悬浮框
            trigger: 'item', // 触发条件
            backgroundColor: 'RGBA(136, 123, 135, 0.8)',
            formatter: '{b}<br/>案件数{c}', // 自定义显示数据
            textStyle: {
              color: '#ffffff'
            }
          },
          series: [
            {
              type: 'map',
              map: 'jilin',
              zoom: 1.2,
              top: '10%',
              x: 'center',
              label: {
                show: true // 显示               
              },
              itemStyle: {
                normal: { // 静态的时候显示的默认样式
                  areaColor: '#F3D7D9', // 地图颜色
                  borderColor: '#886364' // 边框颜色
                },
                emphasis: { // 鼠标移入动态的时候显示的默认样式
                  borderWidth: 2, // 边框宽度
                  areaColor: '#ffffff' // 地图颜色
                }
              },
              // 数据
              data: [
                {
                  name: '长春市',
                  value: '1202'
                },
                {
                  name: '吉林市',
                  value: '396'
                },
                {
                  name: '通化市',
                  value: '1125'
                },
                {
                  name: '四平市',
                  value: '635'
                },
                {
                  name: '白山市',
                  value: '586'
                },
                {
                  name: '辽源市',
                  value: '360'
                },
                {
                  name: '白城市',
                  value: '231'
                },
                {
                  name: '延边朝鲜族自治州',
                  value: '196'
                },
                {
                  name: '松原市',
                  value: '80'
                }
              ]
            }

          ]
        }
        myChart.setOption(option)
      })
    }

6.调用方法 

  mounted () {
    this.getArea()
  },

实现效果