vue编写echarts地图，可以显示或者下钻，省，市，县，引入相应的省，市json文件

首先安装echarts

npm install echarts --save

然后再main.js中引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在需要使用的vue组件中，就可以使用this.$echarts调用echarts的方法，

下面是文件的所有代码，直接引用就能显示，

<style lang="less">
// .o-echarts {
//     min-width: 30px;
//     min-height: 30px;
//     width: 100%;
//     height: 100%;
// }
</style>
<template>
  <div id="jqfbid" style="height:100%;width:100%;"></div>
</template>

<script>
import shandong from "../json/shandong.json";
import binzhou from "../json/binzhou.json";
import dezhou from "../json/dezhou.json";
import dongying from "../json/dongying.json";
import heze from "../json/heze.json";
import jinan from "../json/jinan.json";
import jining from "../json/jining.json";
import laiwu from "../json/laiwu.json";
import liaocheng from "../json/liaocheng.json";
import linyi from "../json/linyi.json";
import qingdao from "../json/qingdao.json";
import rizhao from "../json/rizhao.json";
import taian from "../json/taian.json";
import weifang from "../json/weifang.json";
import weihai from "../json/weihai.json";
import yantai from "../json/yantai.json";
import zaozhuang from "../json/zaozhuang.json";
import zibo from "../json/zibo.json";


export default {
  name: "echart-map",
  data() {
               var jsonMap = {
        '山东': shandong,
        '滨州': binzhou,
        '德州': dezhou,
        '东营': dongying,
        '菏泽': heze,
        '济南': jinan,
        '济宁': jining,
        '莱芜': laiwu,
        '聊城': liaocheng,
        '临沂': linyi,
        '青岛': qingdao,
        '日照': rizhao,
        '泰安': taian,
        '潍坊': weifang,
        '威海': weihai,
        '烟台': yantai,
        '枣庄': zaozhuang,
        '淄博': zibo,
        };
        //循环遍历注册地图
        for (let index in jsonMap) {
            this.$echarts.registerMap(index, jsonMap[index])
        }; 
    return {
      
  }
  },
  mounted() { 
      this.chinaConfigure();
  },
  methods: {
    chinaConfigure() {
        console.log(this.userJson)
        let myChart = this.$echarts.init(document.getElementById("jqfbid")); //这里是为了获得容器所在位置        
        window.onresize = myChart.resize;
        
        myChart.setOption({ // 进行相关配置
          backgroundColor: "#02AFDB",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: '山东', // 根据名字显示中国地图，省或市地图，
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 599
              }, {
                "name": "上海",
                "value": 142
              }, {
                "name": "黑龙江",
                "value": 44
              }, {
                "name": "深圳",
                "value": 92
              }, {
                "name": "湖北",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
              }]
            }
          ]
        })
      }
  }
};
</script>