ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物

前言

最近在做一个项目中，需求是：要显示中国某个省份下，某个市的地图，而地图还要有块级效果，自定义地图颜色，还要在地图上显示不同的建筑物图片，还要每隔几秒后（数据是从后端用ws实时推送过来的，要根据推送过来的数据，动态切换显示对应建筑物的相关信息）。

之前Echarts我也用得挺多的，但是没做过要在地图上显示自定义图片，因为echarts的地图用canvas渲染出来的，而且自定义的图片位置是要根据要求出显示，还要不间断来回切换显示。

刚开始有点懵，在网上一阵狂搜，然而结果并无卵用，都是参差不齐，最多显示一个小圆点之类的，更没什么实例代码。所以，那两天就有点头大，看Echarts官网也不知从那里看起。

最后，还是搞定了，相信在当你看到这篇文章之前，你和我之前的感受应该差不多，都有点头大吧！哈哈，开个玩笑哈！！

好吧，话就说到这里，先来看一下效果图：这里以贵州遵义为例！！

这是中国地图数据图形：

怎么样？

和你现在的项目需求差不多吗，哈哈，又浪了一下？现在来看看实现代码吧！

代码

HTML用来渲染地图用的，宽度和高度自己定义，我这里是以1440 * 916 为例。

 <div id="map-box" style="width:1440px; height:916px"></div>

CSS用于在地图上自动切换时，显示建筑地址及相关信息的样式。

body{background:url(../img/body-bg.jpg) no-repeat;background-size:cover;}
.map-box{border:1px solid #fff;}
#map-box{margin:auto;}
.map-hover-box{position:relative;margin-top:-160px;padding:12px 16px;min-width:200px;border-radius:20px 0 20px 0;background:rgba(11,21,50,.8);box-shadow:0 0 12px 1px #ec7d0f;word-wrap:break-word;}
.map-hover-box::before{position:absolute;top:-1px;right:-1px;width:73px;height:38px;background:url(../img/map-href-rt.png) no-repeat;background-size:contain;content:"";}
.map-hover-box::after{position:absolute;bottom:-1px;left:-1px;width:73px;height:38px;background:url(../img/map-href-lb.png) no-repeat;background-size:contain;content:"";}
.map-hover-box h3{font-size:18px;}
.map-hover-box p{padding-top:12px;font-size:16px;}
.map-hover-box i{position:absolute;bottom:-108px;left:-75px;display:block;width:100px;height:108px;background:url(../img/map-href-zb.png) no-repeat;background-size:contain;}

JavaScript 引用文件

//echarts.min.js 这个就不用说了
<script src="./js/echarts.min.js"></script>

//zunyi.js 是指定让echarts显示的地图（这里是贵州省 遵义市 的地图数据）
<script src="./js/zunyi.js"></script>

//zunyi-data.js 是要在地图上显示的内容（建筑地址、名称、图片、经纬度等，这里一般是从后端传过来的，这里是演示用的哈！！）
<script src="./js/zunyi-data.js"></script>

zunyi-data.js 数据结构如下：
const zunyiData = [
    {
        "adcode": "520321",
        "people_count_2010": 942904,
        "lat": 27.535288,
        "lng": 106.831668,
        "name": "遵义县",
        "level": "district",
        "parent": "遵义市"
    },

    {
        "adcode": "520330",
        "people_count_2010": 523180,
        "lat": 28.327826,
        "lng": 106.200954,
        "name": "习水县",
        "level": "district",
        "parent": "遵义市"
    }
];

这里面的数据结构你可以自己添加 或 删除，一般是从后端传过来的，由于是演示，所以我没有把建筑图片路径加在这里面（因为是本地图片，当然本地图片也可以加），而是直接在调用时添加进去的，具体请看下面JS代码中 注释 //自定义图片的 路径下的JS代码 。

JavaScript实例代码

        //自动切换定时器， 自动切换项目
        let timer = null, nows = -1;

        //初始Echarts实例对象
        const oMap = echarts.init(document.querySelector('#map-box'));


        //指定加载省、市、县、区 （注：这里是重点！！！，zunyi是zunyi.js中大数据变量，而用引号括起来的'zunyi'是要在map: 'zunyi',中加载的变量）
        echarts.registerMap('zunyi', zunyi);

        //（注：由于这里没有用模块化方式导入，所以把zunyi.json文件改为zunyi.js文件，并在里面用一个zunyi常量来引入的）


        //如果你当前环境支持模块化导入方式的话可以直接导入xxxx.json文件，就不用向上面改成js文件后用常量来引入
        //echarts.registerMap('zunyi', require('./js/zunyi.json'));
 
        //（注：想问zunyi.json文件是从哪里来的（或者 是想要其他省、市、县区等），请再向下看！！）


        //图片相关配置信息
        oMap.setOption({
            //标题文本配置
            title: {
                text: '中国 贵州省 遵义市 地理图形',
                textStyle: {
                    color: 'white',
                    fontStyle: 'normal',
                    fontWeight: 'bold',
                    fontSize: 32,
                    lineHeight: 80,
                    textBorderColor: 'green',
                    textBorderWidth: 1,
                    textShadowColor: 'green',
                    textShadowBlur: 10,
                    textShadowOffsetX: 2,
                    textShadowOffsetY: 2
                }
            },

            //提示框组件(可以设置在多种地方)       
            tooltip: {
                show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
                trigger: 'item', //触发类型。item,axis,none
                enterable: true,//鼠标是否可进入提示框浮层中，默认为false，
                showContent: true,          //是否显示提示框浮层
                triggerOn: 'mousemove',//提示框触发的条件(mousemove|click|none)  
                showDelay: 0,               //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
                textStyle: {
                    color: 'white',
                    fontSize: 12
                },
                padding: [0, 8],
                hideDelay: 10,             //浮层隐藏的延迟
                formatter: (o) => (o.data) ? `<section class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>` : '',
                // backgroundColor: 'green',  //提示框浮层的背景颜色。
                // borderColor: "white",  //图形的描边颜色
                // borderWidth: 2,
                alwaysShowContent: true,
                transitionDuration: 1,      //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
            },

            //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
            geo: {
                show: true,
                map: 'zunyi',
                roam: false,
                top: 90,
                left: 306,
                zoom: 1.02,
                aspectScale: 0.9,
                itemStyle: {
                    normal: {
                        opacity: 1,              //图形透明度 0 - 1
                        borderColor: "yellow",  //图形的描边颜色
                        borderWidth: 2,          //描边线宽。为 0 时无描边。
                        borderType: 'solid',     //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                        areaColor: "yellow",   //图形的颜色 #eee
                    }
                }
            },

            //系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型
            series: [{
                name: '贵州省遵义市',
                map: 'zunyi',
                type: "scatter",
                coordinateSystem: "geo",
                symbolSize: 0,
                silent: 'none',
                data: zunyiData.map(item => {
                    return {
                        name: item.name,
                        value: [item.lng, item.lat]
                    };
                })
            },
            {
                map: 'zunyi',
                type: "map",
                zoom: 1,                //当前视角的缩放比例。
                aspectScale: 0.9,       //这个参数用于 scale 地图的长宽比。geoBoundingRect.width / geoBoundingRect.height * aspectScale
                roam: false,            //是否开启鼠标缩放和平移漫游。默认不开启
                label: {
                    show: false,
                    textStyle: {
                        color: "white",
                        fontSize: 12,
                        backgroundColor: ''  //文字背景色
                    }
                },

                itemStyle: {
                    normal: {
                        borderColor: "#00ff00",     //图形的描边颜色
                        borderWidth: 2,             //描边线宽。为 0 时无描边。
                        borderType: 'solid',        //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                        areaColor: "rgba(0, 186, 0, 0.8)",   //图形的颜色 #eee
                        shadowBlur: 100,            //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                        shadowColor: '#002900',     //阴影色
                        shadowOffsetX: 20,          //X轴阴影
                        shadowOffsetY: -20,         //Y轴阴影

                        label: {
                            show: true,
                            textStyle: {
                                color: "white",
                                fontSize: 14
                            }
                        }
                    },
                    //鼠标移入时
                    emphasis: {
                        borderColor: "#005b89",
                        borderWidth: "1",
                        areaColor: "yellow",
                        label: {
                            show: false,
                            textStyle: {
                                color: "purple",
                                fontSize: 14
                            }
                        }
                    },

                    effect: {
                        show: true,
                        shadowBlur: 10,
                        loop: true
                    },
                },
                
                //自定义图片数组对象[{}, {}...]
            }, ...zunyiData.map((item, index) => {
                return {
                    type: "scatter",
                    coordinateSystem: "geo",
                    //自定义图片的 位置（lng, lat）
                    data: [{ name: item.name, value: [item.lng, item.lat] }],
                    //自定义图片的 大小
                    symbolSize: [80, 60],
                    //自定义图片的 路径
                    symbol: `image://img/icon/icon (${index}).png`
                }
            })
            ]
        });

        //自动切换
        const autoShow = (length) => {
            nows = (nows + 1) % length;
            oMap.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: nows
            });
        };

        //每隔5秒钟自动切换到下一个数据点
        autoShow(zunyiData.length);
        clearInterval(timer);
        timer = window.setInterval(() => {
            autoShow(zunyiData.length);
        }, 5000);

        // 点击事件
        oMap.on('click', function (res) {
            console.log(res);
            if('scatter' === res.componentSubType){
                alert(`点击了 ${res.name} 图标`);
            }
            if('map' === res.componentSubType){
                alert(`点击了 ${res.name} 地图`);
            }
        });

Demo地址

实例效果：https://muguilin.github.io/Echarts-Map-Icon 

代码地址：https://github.com/MuGuiLin/Echarts-Map-Icon

你可能会问

1、echarts.min.js 从哪里可以下载？

<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.min.js"></script>

在这里：

(1)、 下载 - Apache ECharts Echarts官网下载

(2) 、https://www.bootcdn.cn/echarts 公共静态资源库

2、zunyi.js 又从哪里可以下载？

<script src="./js/zunyi.js"></script>

注：根据你项目需求的不同，所有想要显示的Echarts地图json也不同，而且可以能是 整个中国的地图数据，也可能是某个省的，市的，县的，区的等，这时怎么办？

(1)、去网上搜也有很多的，但是可能数据不全，或者 需要积分才能下载

(2)、https://github.com/ecomfe/awesome-echarts 去这里查找 

(3)、DataV.GeoAtlas地理小工具系列 去这里下载

在地图上点击选择需要的地图区域后，就可以在左下角下载当前对应区域的地图.json（geoJson）文件啦（里面还包括了其他的格式如svg等，根据自己的需求下载）！

扩展

1、地图拆分：

如果想把地图做一下拆分什么，可以这样做：当你把需要的地图数据.json下载下来以后，可以打开这个网址：http://www.dnccn.com/mapchaifen.html 地图拆分 ，将你下载的地图.json文件拖到里面，可查看地图效果，折分地图区域、编辑等：

2、自定义地图区域：

一般下载的地图.json文件最详细就只到到县级 或 区级 的geo.json，如果就想要乡镇级别的，或者其他区域的数据，可以在当前地图.json的基础上，绘制自己想要的地图数据。

绘制自定义地图网站：http://geojson.io 自定义地图区域

最后

最后想说，Echarts是百度出的一个很强大的商业级数据图表（数据可视化）库（ECharts 底层依赖 ZRender）它提供商业产品常用图表库，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现等，

如果配合上D3.js还可以做出更优秀，更酷炫的效果！比如：3D地球

当然类似的库还有 兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts    Highcharts  让数据可视化更简单兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库！

首先引入地图json文件

引入文件的地址可以用echarts官方网站的github的内容,也可以去这个链接
https://blog.csdn.net/WWW_share8/article/details/90348799,
找到这篇博文中的github链接

生成效果图如下

代码如下

		var markdata=[];//这是为了给地图上添加气泡图标,拿取备用数据

        //取得json的样式，读取json文件
        $.getJSON("./chengdu.json", "", function(data) {
            markdata=convertData(data.features)
            //生成地图
            createMap(data);
        })
        //生成地图
        function createMap(data){
            echarts.registerMap('cd',data);
            var chart = echarts.init(document.getElementById('map'));
            chart.setOption({
                title:{
                    x:'center',
                    text:'成都',
                    textStyle:{
                        color:'#fff'
                    }
                },
                dataRange: {
                    min: 80,//颜色区间的最小值
                    max: 500,//颜色区间的最大值，和data中的最大值一致
                    x: 'left',
                    y: 'bottom',
                    text:['高','低'], // 文本，默认为数值文本
                    calculable : true,
                    inRange: {
                        //颜色区间
                        color: ['lightskyblue','yellow', 'orangered','red']
                    },
                    show:false
                },
                tooltip : {
                    show:true,
                    formatter: ' {b}<br /> 钻石段位: {c}'
                },
                series: [{
                    type: 'map',
                    map: 'cd',
                    itemStyle:{
                        normal:{label:{show:false}},
                        emphasis:{label:{show:true}}
                    },
                    data:markdata,
                    markPoint:{
                        symbolSize: 45,
                        itemStyle: {
                            normal: {
                                borderColor: '#33CBFF',
                                color:'#33CBFF',
                                borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                                label: {
                                    show: true
                                }
                            }
                        },
                        data:markdata
                    }
                }]
            });
            window.addEventListener('resize', function () {
                chart.resize();
            });
        }
        //处理整合   气泡图标数据
        function convertData(arrs) {
            var markdata = [];
            var valuess = [100,300,200,500,211,203,305,406,507,202,100,210,101,1];
            for (var i = 0; i < arrs.length; i++) {
                markdata.push({})
                if (arrs[i].properties.name == '青羊区') {
                    markdata[i].coord = new Array(parseFloat(arrs[i].properties.center[0]) + 0.1, parseFloat(arrs[i].properties.center[1]) - 0.18);
                    console.log(markdata[i])
                } else {
                    markdata[i].coord = arrs[i].properties.center;
                }
                markdata[i].name = arrs[i].properties.name;

                markdata[i].value = valuess[i]
            }
            return markdata
        }

市区地图标注 

安装依赖

安装 echarts 和 echarts-gl 依赖 。

npm i echarts echarts-gl -S

新增 mapdata 资源包

assets 下新增 mapdata 资源包（中国个省市区县 json 文件），可以在网上自行查找下载，也可通过本文案例链接，在码云上拉取获得 。 完整示例链接https://gitee.com/wu241617/echarts-map

新建 map.json 文件

assets 下新增 config 目录，下新建 map.json 文件。我这里案例中只做了抚州市和荆州市的配置，后续有其他区域需要，新增添加即可 。文件中 coord 字段是对应 name 子区域的经纬度，可以在网上搜索查询，后续这里要进行微调，控制标注的位置 。
区域经纬度https://max.book118.com/html/2021/0507/6030102121003144.shtm

{
  "抚州市": {
    "geoJson": "/geometryCouties/361000.json",
    "qxwz": [
      {
        "name": "东乡区",
        "coord": [116.6, 28.18]
      },
      {
        "name": "临川区",
        "coord": [116.35, 27.98]
      },
      {
        "name": "金溪县",
        "coord": [116.75, 28]
      },
      {
        "name": "崇仁县",
        "coord": [116.05, 27.79]
      },
      {
        "name": "宜黄县",
        "coord": [116.25, 27.5]
      },
      {
        "name": "南城县",
        "coord": [116.66, 27.65]
      },
      {
        "name": "资溪县",
        "coord": [117.05, 27.8]
      },
      {
        "name": "乐安县",
        "coord": [115.83, 27.47]
      },
      {
        "name": "南丰县",
        "coord": [116.45, 27.24]
      },
      {
        "name": "黎川县",
        "coord": [116.85, 27.2]
      },
      {
        "name": "广昌县",
        "coord": [116.35, 26.87]
      }
    ]
  },
  "荆州市": {
    "geoJson": "/geometryCouties/421000.json",
    "qxwz": [
      {
        "name": "洪湖市",
        "coord": [113.59, 30.02]
      },
      {
        "name": "江陵县",
        "coord": [112.49, 30.01]
      },
      {
        "name": "荆州区",
        "coord": [112.08, 30.49]
      },
      {
        "name": "沙市区",
        "coord": [112.35, 30.41]
      },
      {
        "name": "松滋市",
        "coord": [111.62, 30.03]
      },
      {
        "name": "公安县",
        "coord": [112.12, 29.87]
      },
      {
        "name": "监利县",
        "coord": [112.96, 29.91]
      },
      {
        "name": "石首市",
        "coord": [112.51, 29.82]
      }
    ]
  }
}

组件案例

• HTML：

<template>
  <div>
    <select v-model="selectCity"
      @change="cityChange"
      class="select">
      <option :label='item.name'
        :value="item.value"
        v-for="item in options"
        :key="item.value"></option>
    </select>
    <div class="selectedText">{{selectedText}}</div>
    <div class="mapMain"
      id="mapMain"></div>
  </div>
</template>

• JS：

【注意】：地图配置中， geo 数组中有两个子项，渲染两个地图，通过控制 center 属性值配置，形成微错位，视觉上立体， 注意 center 值要处于当前区域经纬度之间，需要微调否则看不到地图渲染 ，其他具体配置请查看官方文档配置项。
官方文档https://echarts.apache.org/zh/option.html#title

import * as echarts from 'echarts';
import 'echarts-gl';
import { mapState } from 'vuex'

export default {
  name: 'Main',
  data() {
    return {
      selectCity: '361000',
      mapConfigJson: require("../../assets/config/map.json"),
      map: '',
      mapLoadCity: '',
      cityName: [],
      mapdataJson: [],
      selectedText: ''
    }
  },
  mounted() {
    this.cityChange();
  },
  computed: {
    ...mapState(['JZtestData', 'FZtestData', 'options'])
  },
  methods: {
    // 下拉框城市区域切换  
    cityChange() {
      this.selectedText = ''
      this.cityName = []
      this.options.map(item => {
        if (item.value === this.selectCity) {
          this.mapLoadCity = item.name
          this.cityName.push(item.name)
        }
      })
      this.mapChart();
    },
    //显示地图
    mapChart() {
      this.map = echarts.init(document.getElementById('mapMain'));
      this.initMenu();
      this.map.on("click", this.mapClick);
    },
    //地图点击事件
    mapClick(param) {
      this.selectedText = `当前选中区域为: ${this.mapLoadCity}--${param.name}`;
    },
    initMenu() {
      this.loadMap(this.mapLoadCity, this.loadData(this.mapLoadCity));
    },
    loadData(mapLoadCity) {
      if (mapLoadCity === '荆州市') {
        return this.JZtestData;
      }
      if (mapLoadCity === '抚州市') {
        return this.FZtestData;
      }
    },
    /**
      * 加载地图
      * @param name
    */
    loadMap(name, mapdataJson) {
      let markPointData = this.mapConfigJson[name]["qxwz"];
      if (!this.mapConfigJson[name].geoJson) {
        return;
      }
      let geoJson = require("../../assets/mapdata" + this.mapConfigJson[name].geoJson);
      echarts.registerMap(name, geoJson);
      let dataColor = () => {
        let colorlist = [];
        for (let i = 0; i < mapdataJson.length; i++) {
          if (mapdataJson[i].value < 1000) {
            colorlist.push("rgb(207,234,254)");
          } else if (mapdataJson[i].value >= 1000 && mapdataJson[i].value < 2000) {
            colorlist.push("rgb(138,184,252)");
          } else if (mapdataJson[i].value >= 2000 && mapdataJson[i].value < 3000) {
            colorlist.push("rgb(101,162,249)");
          } else if (mapdataJson[i].value >= 3000) {
            colorlist.push("rgb(79,132,235)");
          }
        }
        return colorlist;
      }
      let option = {
        geo: [
          {
            geoIndex: 0,
            z: 1,
            type: 'map',
            map: name,
            center: [116.38, 27.56],
            zoom: 1,
            aspectScale: 1.3, //长宽比
            scaleLimit: {
              "min": 1.1,
              "max": 15
            },
            label: { //标签样式设置
              show: true,
              fontSize: 14,
              color: 'rgba(255,255,255)',
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 1,
                areaColor: 'rgb(207,234,254)',
                fontWeightL: 700,
              },
              emphasis: {
                areaColor: 'rgb(243,215,115)',
                borderWidth: 0
              }
            },
            select: {
              itemStyle: {
                areaColor: 'rgb(243,215,115)',
                borderColor: '#fff',
                borderWidth: 3,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              }
            },
            selectedMode: 'multiple',
          },
          {
            geoIndex: 0,
            map: name,
            z: 0,
            zoom: 1,
            center: [116.348, 27.58],
            aspectScale: 1.3, //长宽比
            scaleLimit: {
              "min": 1.1,
              "max": 15
            },
            label: { //标签样式设置
              show: true,
              fontSize: 14,
              color: 'rgba(150,181,246,0)',
            },
            itemStyle: {
              normal: {
                shadowColor: '#ececec',
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                borderColor: "#fff",
                borderWidth: 1,
                areaColor: 'rgb(187,217,253)',
              },
              emphasis: {
                areaColor: 'rgb(187,217,253)',
                borderWidth: 0
              },
            }
          },
        ],
        visualMap: [{
          min: 0,
          max: 10,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          show: false,
          inRange: {
            color: dataColor()
          }
        }],
        color: ['white'],
        series: [
          {
            name: "热力图",
            type: "heatmap",
            coordinateSystem: "geo",
            geoIndex: 0,
            markPoint: { //标记点
              symbol: 'roundRect',
              symbolKeepAspect: true,
              symbolSize: [35, 15], //图形大小
              label: {
                width: 100,
                height: 50,
                normal: {
                  color: '#000',
                  formatter: function (params) {
                    for (let i = 0; i < mapdataJson.length; i++) {
                      if (mapdataJson[i].name == params.name) {
                        return mapdataJson[i].value;
                      }
                    }
                  },
                  show: true,
                },
                emphasis: {
                  show: true,
                }
              },
              itemStyle: {
                color: '#fff',
              },
              data: markPointData
            }
          },
          {
            name: '地市',
            type: 'map',
            geoIndex: 0,
            data: this.getMapColor(geoJson)
          }
        ]
      };
      if (this.mapLoadCity === '荆州市') {
        option.geo[0].center = [112.71, 29.71];
        option.geo[0].zoom = 1.2;
        option.geo[1].center = [112.73, 29.73];
        option.geo[1].zoom = 1.2;
      }
      this.map.setOption(option, true);
    },
    /**
     * 生成地图颜色
     * @param geoJson
     * @returns {Array}
     */
    getMapColor(geoJson) {
      let list = [];
      for (let i in geoJson.features) {
        let feature = geoJson.features[i];
        let name = feature.properties.name;
        let json = {};
        json.name = name;
        json.value = i % 11;
        if (this.cityName.length == 2) {
          if (this.cityName[1] == name) {
            json.selected = true;
          }
        }
        list.push(json);
      }
      return list;
    },
  }
}

• CSS：

组件内样式

.mapMain {
  width: 1000px;
  height: 750px;
}

全局样式（在 assets 下新建 CSS 目录，下新增 common.css 文件）

* {
    margin: 0;
    padding: 0;
}

html,
body {
    font-size: 24px;
    font-family: '楷体' !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.home {
    width: 1000px;
    height: 800px;
    border: 1px solid black;
    padding: 10px;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: white;
    background: black;
}

.main {
    width: 100%;
    height: 750px;
    background: lavender;
    position: relative;
    z-index: 1;
}

.select {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, .4);
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    z-index: 999;
}

.selectedText {
    border-bottom: 2px solid lightblue;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 15px;
    z-index: 999;
}

模拟测试数据

使用 vuex 模拟后端请求到的地图数据，存放在 store 下的 index.js 文件中的 state 内 。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        JZtestData: [{
                name: "洪湖市",
                qxdm: "421083",
                value: 654
            },
            {
                name: "江陵县",
                qxdm: "421024",
                value: 13
            },
            {
                name: "荆州区",
                qxdm: "421003",
                value: 4222
            },
            {
                name: "沙市区",
                qxdm: "421002",
                value: 1854
            },
            {
                name: "松滋市",
                qxdm: "421087",
                value: 1023
            },
            {
                name: "公安县",
                qxdm: "421022",
                value: 10
            },
            {
                name: "监利县",
                qxdm: "421023",
                value: 2183
            },
            {
                name: "石首市",
                qxdm: "421081",
                value: 12
            }
        ],
        FZtestData: [{
                name: "东乡区",
                qxdm: "361029",
                value: 654
            },
            {
                name: "临川区",
                qxdm: "361002",
                value: 13
            },
            {
                name: "金溪县",
                qxdm: "361027",
                value: 4222
            },
            {
                name: "崇仁县",
                qxdm: "361024",
                value: 1854
            },
            {
                name: "宜黄县",
                qxdm: "361026",
                value: 1023
            },
            {
                name: "南城县",
                qxdm: "361021",
                value: 10
            },
            {
                name: "资溪县",
                qxdm: "361028",
                value: 2183
            },
            {
                name: "乐安县",
                qxdm: "361025",
                value: 12
            },
            {
                name: "南丰县",
                qxdm: "361023",
                value: 10
            },
            {
                name: "黎川县",
                qxdm: "361022",
                value: 2183
            },
            {
                name: "广昌县",
                qxdm: "361030",
                value: 12
            }
        ],
         options: [{
             name: '荆州市',
             value: '421000'
         }, {
             name: '抚州市',
             value: '361000'
         }]
    },
    mutations: {},
    actions: {},
    modules: {}
})

中国地图下钻省市区县

获取中国【省市区县】json 数据 

安装 province-city-china 依赖。 

npm i province-city-china -S

数据项解析 

请求已安装的 province-city-china 依赖包，获取各项数据。

参考链接https://juejin.cn/post/6844903527844675591

const { data, province, city, area, town } = require('province-city-china/data');
// data - 总数据(省/地/县/乡)
// province - 省级(省/直辖市/特别行政区)
// city - 地级(城市)
// area - 县级(区县)
// town - 乡级(乡镇/街)

组件案例

• HTML

<template>
  <div>
    <div id="tool">
      <span @click="goBackChina">{{firstTitle}}</span>
      <span @click="goBackProvince">{{currentProvince.name}}</span>
      <span @click="goBackCity">{{currentCity.name}}</span>
    </div>
    <div id="chinaMap"></div>
  </div>
</template>

• JS 

import * as echarts from 'echarts';
const { province, city } = require('province-city-china/data');

export default {
  name: 'ChinaMain',
  data() {
    return {
      firstTitle: '中国',
      myChart: '',
      currentClick: '',
      currentProvince: {},
      currentCity: {},
      cityState: false,
      provinceState: false
    }
  },
  mounted() {
    this.initEcharts("china", "中国");
  },
  methods: {
    goBackChina() {
      this.initEcharts("china", "中国");
      this.currentProvince.name = '';
      this.currentCity.name = '';
    },
    goBackProvince() {
      this.initEcharts(this.currentProvince.province, this.currentProvince.name, "1");
      this.currentCity.name = '';
    },
    goBackCity() {
      this.initEcharts(this.currentCity.code, this.currentCity.name);
    },
    initEcharts(pName, Chinese_, state = "0") {
      this.myChart = echarts.init(document.getElementById('chinaMap'));
      let tmpSeriesData = [];
      if (pName === "china") {
        let geoJson = require('../../assets/mapdata/china.json');
        echarts.registerMap(pName, geoJson);
      } else {
        if (this.currentClick === 'province' || state === "1") {
          let geoJson = require(`../../assets/mapdata/geometryProvince/${pName}.json`);
          echarts.registerMap(pName, geoJson);
        } else {
          let geoJson = require(`../../assets/mapdata/geometryCouties/${pName}.json`);
          echarts.registerMap(pName, geoJson);
        }
      }
      let option = {
        series: [
          {
            name: Chinese_ || pName,
            type: 'map',
            mapType: pName,
            roam: false,//是否开启鼠标缩放和平移漫游
            itemStyle: {//地图区域的多边形 图形样式
              normal: {//是图形在默认状态下的样式
                label: {
                  show: true,//是否显示标签
                  textStyle: {
                    color: "#303133",
                    fontSize: '10px'
                  }
                }
              },
              emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: {
                  show: true,
                  textStyle: {
                    fontSize: '14px'
                  }
                }
              }
            },
            data: tmpSeriesData,//后端数据
            top: "10%"//组件距离容器的距离
          }
        ]
      };
      this.myChart.setOption(option, true);
      this.myChart.off("click");
      if (pName === "china") { // 全国时，添加click 进入省级
        this.currentClick = 'province'
        this.myChart.on('click', this.mapClick);
      } else {
        this.currentClick = 'city'
        this.myChart.on('click', this.mapClick);
      }
    },
    //地图点击事件
    mapClick(param) {
      this.provinceState = false;
      this.cityState = false;
      if (this.currentClick === 'province') {
        //遍历取到provincesText 中的下标  去拿到对应的省js
        for (var i = 0; i < province.length; i++) {
          if (param.name === province[i].name) {
            this.provinceState = true;
            this.currentProvince = { ...province[i] };
            this.currentProvince.name = ` -->${this.currentProvince.name} `;
            //显示对应省份的方法
            this.showProvince(province[i].province, province[i].name);
            break;
          }
        }
        !this.provinceState ? alert('暂不支持该区域地图展示!') : '';
      } else {
        for (var l = 0; l < city.length; l++) {
          if (param.name === city[l].name) {
            this.cityState = true;
            this.currentCity = { ...city[l] };
            this.currentCity.name = ` -->${this.currentCity.name} `;
            //显示对应城市的方法
            this.showProvince(city[l].code, city[l].name);
            break;
          }
        }
        !this.cityState ? alert('暂不支持该区域地图展示!') : '';
      }
    },
    showProvince(pName, Chinese_) {
      this.initEcharts(pName, Chinese_);
    }
  }
}

• CSS 

#tool {
  height: 30px;
  line-height: 30px;
  color: deepskyblue;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10000;
  font-size: 18px;
  text-align: left;
}
#chinaMap {
  width: 1000px;
  height: 750px;
}

完整示例，注意事项 

完整示例

完整示例链接https://gitee.com/wu241617/echarts-map

注意事项 

【注意】： 在完整示例中，码云下拉代码到本地后，npm install 安装依赖，npm run serve 启动项目，默认显示 /home 路由页面，中国下钻省市区县页面通过 /cm 路由访问。依赖于 mapdata 资源包和 province-city-china  依赖。