vue + echart +map 地图实现省下钻到市

第一步：安装依赖和全局注册echart
安装步骤请看我另一篇文章vue + echart +map实现中国，省，市地图
将市的json 文件放在全局static 文件夹下，并引入

import baotoushi from '../../../static/json/huhehaoteshi.json'
import huhehaoteshi from '../../../static/json/huhehaoteshi.json'
import baotoushi from '../../../static/json/baotoushi.json'
import wuhaishi from '../../../static/json/wuhaishi.json'
。。。。。引入全部

第二步: methods里定义方法，先初始化地图实例（自己查文档加地图底色）

getDownMap(){
    let that = this;let chart = that.$echarts.init(document.getElementById("mapChart"));let name = "内蒙古";let option = {
    geo: {
    map: name,label: {
    normal: {
    show: true,textStyle: {
    color: '#fff',fontSize: 20}},emphasis: {
    textStyle: {
    color: '#fff'}}},itemStyle: {
    normal: {
    borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {
    //背景色type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{
    offset: 0, color: 'rgba(4, 129, 181, 0.2)' // 0% 处的颜色}, {
    offset: 1, color: 'rgba(4, 129, 181, 0.4)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(128, 217, 248, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10},emphasis: {
    areaColor: '#389BB7',borderWidth: 0}},},series: [{
    type: 'effectScatter',coordinateSystem: 'geo',}]}that.$echarts.registerMap(name,neimenggu);//这句是由于返回的时候点击某个按钮，又执行了这个方法，但是地图不能加载，所以我注册了一下，用的json 数据，可写可不写chart.setOption(option);//注意这句要放在registerMap后面，要不然地图就变成了双击才能下钻！！！！md，找了好久原因
}

第三步： 点击省地图里的区块，加载市地图，实现下钻

data(){
    return{
    mapList: ["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"]}
}
//下面的事件需要写在上面的getDownMap()里
chart.on('click', function(params){
    //如果数组没有代表到了区县，跳出循环if(that.mapList.indexOf(params.name) < 0){
    return}//根据点击的市，加载不同jsonlet mapJson;switch(params.name){
    case '呼和浩特市':mapJson = huhehaoteshi;break;case '包头市':mapJson = baotoushi;break;case '乌海市':mapJson = wuhaishi;break;case '赤峰市':mapJson = chifengshi;break;case '通辽市':mapJson = tongliaoshi;break;case '鄂尔多斯市':mapJson = eerduosishi;break;case '呼伦贝尔市':mapJson = hulunbeiershi;break;case '巴彦淖尔市':mapJson = bayannaoershi;break;case '乌兰察布市':mapJson = wulanchabushi;break;case '兴安盟':mapJson = xinganmeng;break;case '锡林郭勒盟':mapJson = xilinguolemeng;break;case '阿拉善盟':mapJson = alashanmeng;break; }//下面的name需要为“内蒙古”，而不是具体点击的市that.$echarts.registerMap(name,mapJson);chart.setOption(option);

第四步：返回省份地图我采用的是加一个“内蒙古”按钮，点击重新执行getDownMap()，但是由于chart.setOption(option);不成功，所以又用json 数据加载注册了一遍，详见第二步的倒数第二句

成品： 当当当当~~~~