Echarts山东省地图两级钻取、返回及济南合并莱芜地图

Echarts3.0+jQuery3.3.1

山东省地图中济南市需要注意下，莱芜市已经和济南市合并，地图数据来源于地图选择器，获取山东省地图信息及各地市地图信息（JSON格式）

    //山东地图（第一级地图）的英文、中文、Json数据
    var shandongId = 'shandong';//找到json串
    var shandongName = '山东';//加载地图
    var shandongJson = null;

    //记录父级ID、Name
    var mapStack = [];
    var parentId = null;
    var parentName = null;
    
    var cityProper = {
        '济南市': 'jinan',
        '青岛市': 'qingdao',
        '威海市': 'weihai',
        '烟台市': 'yantai',
        '潍坊市': 'weifang',
        '淄博市': 'zibo',
        '日照市': 'rizhao',
        '临沂市': 'linyi',
        '济宁市': 'jining',
        '枣庄市': 'zaozhuang',
        '菏泽市': 'heze',
        '聊城市': 'liaocheng',
        '泰安市': 'taian',
        '德州市': 'dezhou',
        '滨州市': 'binzhou',
        '东营市': 'dongying'
    };
    
    showChart('mapChart');
    
    /**
     * Echarts地图
     */
    //Echarts地图全局变量，主要是在返回上级地图的方法中会用到
    var myChart = null;
    function showChart(divid) {
        $.get('/js/cockpit/json/shandong/' + shandongId + '.json', function (mapJson) {
            shandongJson = mapJson;
            myChart = echarts.init(document.getElementById(divid));
            registerAndsetOption(myChart, shandongId, shandongName, mapJson, false);
            parentId = shandongId;
            parentName = '山东';
            myChart.on('click', function (param) {
                var cityId = cityProper[param.name];
                if (cityId != 'shandong' && mapStack.length == 0) {//代表有下级地图
                    $.get('/js/cockpit/json/shandong/' + cityId + '.json', function (mapJson) {
                        registerAndsetOption(myChart, cityId, param.name, mapJson, true);
                    })
                } else {
                    //没有下级地图，回到山东地图，并将mapStack清空
                    registerAndsetOption(myChart, shandongId, shandongName, shandongJson, false);
                    mapStack = [];
                    parentId = shandongId;
                    parentName = shandongName;
                }
            });
        })
    }

    /**
     * 公共方法
     * @param {*} myChart 
     * @param {*} id        市英文名称
     * @param {*} name      市汉语名称
     * @param {*} mapJson   地图Json数据
     * @param {*} flag      是否往mapStack里添加parentId，parentName
     */
    function registerAndsetOption(myChart, id, name, mapJson, flag) {

        echarts.registerMap(name, mapJson);
        option = {
            title: {
                text: name + 'xx数据分析',
                subtext: '数据来自xx'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var obj = JSON.parse(JSON.stringify(params));
                    var str = "<ul style='text-align:left'><li style='color: #da70d6;font:bold;'>" + obj.name + "</li>";
                    str = str + "<li> xx总数 :" + obj.data.value + "</li>";
                    str = str + "<li> xx总数 :" + (obj.data.scnum + obj.data.ltnum) + "</li>";
                    str = str + "<li> xx总数  :" + obj.data.scnum + "</li>";
                    str = str + "<li> xx总数  :" + obj.data.ltnum + "</li>";
                    str = str + "</ul>";
                    return str;
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'top',
                feature: {
                    dataView: {
                        readOnly: false
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                min: 0,
                max: 60000,
                text: ['高', '低'],
                left: 'right',
                top: 'bottom',
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            geo: {
                show: true,
                map: name,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                    }
                },
                roam: false, //鼠标平移或者缩放
                itemStyle: { //每个点的样式
                    normal: {
                        areaColor: 'transparent',
                        borderColor: '#3fdaff',
                        borderWidth: 2,
                        shadowColor: 'rgba(63, 218, 255, 0.5)',
                        shadowBlur: 30
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    }
                }
            },
            series: [{
                name: name+'xx数据分析',
                type: 'map',
                coordinateSystem: 'geo',
                mapType: name,
                mapLocation: {
                    x: 'center'
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                data:(function () {
                    var datas = [];
                    var params = {
                        "name":name
                    };
                    $.ajax({
                        type:"POST",
                        url:"/xx/xx",
                        dataType:"json",
                        data:params,
                        async:false,
                        success:function (result) {
                            for (var i = 0; i < result.length; i++){
                                datas.push({
                                    "value":result[i].totalnum, "name":result[i].city,
                                    "scnum":result[i].scnum, "ltnum":result[i].ltnum
                                })
                            }
                        }
                    })
                    return datas;
                })(),
            }]
        };
        myChart.setOption(option);

        if (flag) {//往mapStack里添加parentId，parentName,返回上一级使用
            mapStack.push({
                mapId: parentId,
                mapName: parentName
            });
            parentId = id;
            parentName = name;
        }
    }

效果图如下

 

 

 

 

 

 

参考：https://dongkelun.com/2018/11/27/echartsChinaMap/