Echarts地图省市关联下钻，读取数据库中数据

js文件

$(function() {
    // $('.chart').resize(function () {
    //     myChart.resize();
    // });
    $.ajax({
        type: "post",
        async: false,
        //同步执行
        url: "/test/getCityDateAjax.ajax",
        data: {
            cityName: ""
        },
        //显示省级数据
        dataType: "json",
        //返回数据形式为json
        success: function(result) {
            dataname = result.dataname;
            datavalue = result.datavalue;

            // for(var i=0;i<result.dataname.length;i++){
            //     dataname.push(result.dataname[i]);
            // }
            // for(var i=0;i<result.datavalue.length;i++){
            //     datavalue.push(result.datavalue[i]);
            // }
            // myChartProe.setOption({        //加载数据图表
            //     series: [{
            //         data : [{
            //             // 根据名字对应到相应的系列
            //             name: result.dataname,
            //             value: result.datavalue
            //         }]
            //     }]
            // });
            // alert("返回数据长度dataname11111!"+dataname.length);
            // alert("返回数据长度datavalue11111!"+datavalue.length);
            // if (dataname) {
            //     for (var i = 0; i < dataname.length; i++) {
            //         alert("返回数据!"+dataname[i]);
            //     }
            // }
        },
        error: function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })

    var myChartProe = echarts.init(document.getElementById('proe_map'), 'wonderland'); //在id为mainMap的dom元素中显示地图
    window.onresize = myChartProe.resize;
    //显示省地图
    $.get('../resources/js/test/json/河南.json',
    function(mapJson) {
        echarts.registerMap('henan', mapJson);

        myChartProe.setOption({
            title: {
                text: '告警地图',
                //subtext:'',
                x: 'center',
                y: '30px',
                textAlign: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: function(result) { //回调函数，参数params具体格式参加官方API
                    return result.name + '<br />报警数:' + result.value;
                }
            },
            visualMap: {
                min: 0,
                max: Math.max.apply(null, datavalue),
                //最大值根据数据库中获取的来确定
                x: 'left',
                y: '250px',
                // splitNumber:0,
                text: ['高', '低'],
                calculable: true,
                // orient: 'horizontal',
                color: ['orangered', 'yellow', 'lightskyblue']
            },
            toolbox: {
                show: true,
                orient: 'horizontal',
                x: '30px',
                y: '30px',
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },

            series: [{
                name: '-----省内危险数-----',
                type: 'map',
                map: 'henan',
                //要和echarts.registerMap（）中第一个参数一致
                scaleLimit: {
                    min: 0.8,
                    max: 1.9
                },
                //缩放
                itemSytle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                //加载ajax查询出的数据
                data: (function() {
                    var res = [];
                    var len = dataname.length;

                    while (len--) {
                        res.push({
                            name: dataname[len],
                            value: datavalue[len]
                        });
                    }
                    return res;
                })()
            }]
        }),

        //点击省地图中的市
        myChartProe.on('click',
        function(result) { //回调函数，点击时触发，参数params格式参加官方API
            setTimeout(function() {
                $('#proe_map').css('display', 'none');
                $('#city_map').css('display', 'block');
                $('#retPro').css('display', 'block');
            },
            500);
            //选择省的单击事件
            var selectCity = result.name;

            //再次执行查询，参数是市的名称
            $.ajax({
                type: "post",
                async: false,
                //同步执行
                url: "/test/getCityDateAjax.ajax",
                data: {
                    cityName: selectCity
                },
                //查询条件
                dataType: "json",
                //返回数据形式为json
                success: function(result2) {
                    datanameCity = result2.dataname;
                    datavalueCity = result2.datavalue;
                },
                error: function(errorMsg) {
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })

            //    调取后台数据
            $.get('../resources/js/test/json/河南/' + selectCity + '.json',
            function(Districtmap) {
                echarts.registerMap(selectCity, Districtmap);
                var myChartCity = echarts.init(document.getElementById('city_map'));
                myChartCity.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: function loadData(result) { //回调函数，参数params具体格式参加官方API
                            return result.name + '<br />报警数:' + result.value;
                        }
                    },
                    dataRange: {
                        min: 0,
                        max: Math.max.apply(null, datavalueCity),
                        x: 'left',
                        y: '250px',
                        splitNumber: 0,
                        text: ['高', '低'],
                        calculable: true,
                        color: ['orangered', 'yellow', 'lightskyblue']
                    },
                    title: {
                        text: selectCity + '数据总览',
                        //subtext:'',
                        x: 'center',
                        y: '30px',
                        textAlign: 'left'
                    },
                    toolbox: {
                        show: true,
                        orient: 'horizontal',
                        x: '30px',
                        y: '30px',
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: '-----' + selectCity + '危险数' + '------',
                        type: 'map',
                        map: selectCity,
                        //要和echarts.registerMap（）中第一个参数一致
                        scaleLimit: {
                            min: 0.8,
                            max: 1.9
                        },
                        //缩放
                        mapLocation: {
                            y: 10
                        },
                        itemSytle: {
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: (function() {
                            var res = [];
                            var len = datanameCity.length;

                            while (len--) {
                                res.push({
                                    name: datanameCity[len],
                                    value: datavalueCity[len]
                                });
                            }
                            return res;
                        })()
                    }]
                }),
                myChartDistrict.on('click',
                function(rel) {
                    setTimeout(function() {},
                    500);
                })
            });
        });
    });

});

ajax调用Servlet方法

@RequestMapping(value = "/getCityDateAjax.ajax")
    @ResponseBody
    public String getCityDateInfo(HttpServletRequest request,HttpServletResponse response) throws Exception{
        JSONObject json=new JSONObject();
        String cityName = request.getParameter("cityName");

        //EchartCityForm 是实体类
        List<EchartCityForm> listEcahrtCitys=echartCityService.getAllEchartCity(cityName);
        //将数据放到两个List中
        List dataname= new ArrayList();
        List datavalue= new ArrayList();
        //市级数据为空时，地图会错乱，加了一条空数据处理
        if(listEcahrtCitys.size()==0){
            dataname.add("此地区没有数据");
            datavalue.add(0);
        }else
        {
            for (EchartCityForm listEcahrtCity:listEcahrtCitys) {

                dataname.add(listEcahrtCity.getCityName());
                datavalue.add(listEcahrtCity.getCityData());
            }
        }

        //将List放到json中返回给前端
        json.put("dataname", dataname);
        json.put("datavalue", datavalue);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(json.toString());
        return null;

    }

使用了mybatis处理Sql

<!--获取城市数据，判断cityName来获取省级或者市级的数据-->
    <select id="getAllEchartCity" resultMap="echartCityMap">
        SELECT id,cityName,cityData,cityParent,citycode FROM echartCity
        where 1=1
        <if test="cityName!=null and cityName!=''">
            AND cityParent=(select id from echartcity where cityName=#{cityName} and cityParent=0)
        </if>
        <if test="cityName==null or cityName==''">
            AND cityParent=0
        </if>
    </select>

DIV层

<div id="chart" style="float:left;width:410px; height:450px;border:0px solid #ccc;position: relative;">
            <div id="proe_map" style="width:400px;height:450px;margin-top:-20px; display: block; "></div>
            <div id="city_map" style="width:400px;height:450px;margin-top:-20px; display: none;"></div>
            <div id="retPro" style="position: absolute;top:15px;left:280px;display: none;">
                <a href="javascript:void(0);" onclick="goBackProeMap()" style="height:30px;background:#fff;line-height: 10px;border:1px solid #ccc;padding:5px 5px;border-radius:5px;cursor: pointer;color:#393939;text-decoration:none;">
                    返回省级地图
                </a>
            </div>
        </div>

省地图

市地图