一、要求：在上一篇博客的基础上

1、单击各个省可以下钻到各个地市的数据显示。

2、鼠标移到每个市会高亮显示，并且显示简单的数据；

二、思路

1、下载各省份的json数据格式的地图文件。

2、采用echart的点击事件myChart.on(\’click\’,function(params){   }); 

说明在此案例中 params {name：‘’，value ：‘’}，里有两个值name是省份的名称，value是该省分的确诊人数，这样就可以通过省份的名称找到该省分相对应的地图json文件，如此就可以显示该省分的地图了。

3、数据准备，依据params中的省份，和用户输入的时间使用 ajax 从数据库获取该省分下个市的数据，并返回给界面（json数组）。

4、将json数组转换为js数组并按照echart的数据要求处理数据。

三、源代码

1、全国地图

<!DOCTYPE html>
<html style="height: 100%">

<head>
<meta charset="utf-8">
<base>
<title>地图阶段三</title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div class="row" style="background-color: silver; height: 50px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日期 <input type="text" name="time"
            id="time" placeholder="yyyy-MM-dd hh:mm:ss"> <input
            type="button" value="查询" onclick="tu()">
    </div>
    <div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
    function randomData() {
        return Math.round(Math.random() * 500);
    }
    var dt;
    var mydata1 = new Array(0);
    function tu() {
        time = $("#time").val();
        //alert(time.substring(0, 2));
        $.ajax({
            url : "info?method=tu",
            async : true,
            type : "POST",
            data : {
                "time" : time
            },
            success : function(data) {
                dt = data;
                for (var i = 0; i < 33; i++) {
                    var d = {
                        
                    };
                    
                    d["name"] = dt[i].province;//.substring(0, 2);
                    d["value"] = dt[i].confirmed_num;
                    d["yisi_num"] = dt[i].yisi_num;
                    d["cured_num"] = dt[i].cured_num;
                    d["dead_num"] = dt[i].dead_num;
                    mydata1.push(d);
                }
                alert(mydata1);
                //var mdata = JSON.stringify(mydata1);
                var optionMap = {
                    backgroundColor : \'#FFFFFF\',
                    title : {
                        text : \'全国地图大数据\',
                        subtext : \'\',
                        x : \'center\'
                    },
                    tooltip : {
                        formatter : function(params) {
                            return params.name + \'<br/>\' + \'确诊人数 : \'
                                    + params.value + \'<br/>\' + \'死亡人数 : \'
                                    + params[\'data\'].dead_num + \'<br/>\' + \'治愈人数 : \'
                                    + params[\'data\'].cured_num + \'<br/>\'+ \'疑似患者人数 : \'
                                    + params[\'data\'].yisi_num;
                        }//数据格式化
                    },

                    //左侧小导航图标
                    visualMap : {
                        min : 0,
                        max : 35000,
                        text : [ \'多\', \'少\' ],
                        realtime : false,
                        calculable : true,
                        inRange : {
                            color : [ \'lightskyblue\', \'yellow\', \'orangered\' ]
                        }
                    },

                    //配置属性
                    series : [ {
                        type : \'map\',
                        mapType : \'china\',
                        label : {
                            show : true
                        },
                        data : mydata1,
                        nameMap : {

                            \'南海诸岛\' : \'南海诸岛\',
                            \'北京\' : \'北京市\',
                            \'天津\' : \'天津市\',
                            \'上海\' : \'上海市\',
                            \'重庆\' : \'重庆市\',
                            \'河北\' : \'河北省\',
                            \'河南\' : \'河南省\',
                            \'云南\' : \'云南省\',
                            \'辽宁\' : \'辽宁省\',
                            \'黑龙江\' : \'黑龙江省\',
                            \'湖南\' : \'湖南省\',
                            \'安徽\' : \'安徽省\',
                            \'山东\' : \'山东省\',
                            \'新疆\' : \'新疆维吾尔自治区\',
                            \'江苏\' : \'江苏省\',
                            \'浙江\' : \'浙江省\',
                            \'江西\' : \'江西省\',
                            \'湖北\' : \'湖北省\',
                            \'广西\' : \'广西壮族自治区\',
                            \'甘肃\' : \'甘肃省\',
                            \'山西\' : \'山西省\',
                            \'内蒙古\' : "内蒙古自治区",
                            \'陕西\' : \'陕西省\',
                            \'吉林\' : \'吉林省\',
                            \'福建\' : \'福建省\',
                            \'贵州\' : \'贵州省\',
                            \'广东\' : \'广东省\',
                            \'青海\' : \'青海省\',
                            \'西藏\' : \'西藏自治区\',
                            \'四川\' : \'四川省\',
                            \'宁夏\' : \'宁夏回族自治区\',
                            \'海南\' : \'海南省\',
                            \'台湾\' : \'台湾\',
                            \'香港\' : \'香港\',
                            \'澳门\' : \'澳门\'
                        }

                    } ]
                };
                
                //初始化echarts实例
                var myChart = echarts.init(document.getElementById(\'main\'));
                myChart.on(\'click\', function (params) {
                         var url = "info?method=city&province=" + params.name+"&time="+time;
                         window.location.href = url;
                     });
                //使用制定的配置项和数据显示图表
                myChart.setOption(optionMap);
            },
            error : function() {
                alert("请求失败");
            },
            dataType : "json"
        });
    }
</script>
</html>

View Code

2、各省的地图

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<title>Insert title here</title>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;;height:600px;"></div>    
  
<script>

var myChart = echarts.init(document.getElementById(\'main\'));
//myChart.showLoading();
var province = "${province}";
//var list = "${list}";


$.get("mapjson/"+ province +".json", function (geoJson) {

    myChart.hideLoading();

    echarts.registerMap(province, geoJson);

    myChart.setOption(option = {
        title: {
            text: province + \'地区疫情情况\',
        },
        tooltip: {
            trigger: \'item\',
            formatter: \'{b}<br/>{c} (确诊 / 人)\'
        },
        toolbox: {
            show: true,
            orient: \'vertical\',
            left: \'right\',
            top: \'center\',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 0,
            max: 50000,
            text: [\'High\', \'Low\'],
            inRange: {
                color: [\'lightskyblue\', \'yellow\', \'orangered\']
            }
        },
        series: [
            {
                name: province + \'地区疫情情况\',
                type: \'map\',
                mapType: province, // 自定义扩展图表类型
                label: {
                    show: true
                }
            }
        ]
    });
});



$.ajax({
    url:"info?method=d",
    async:true,
    type:"POST",
    data:{"province":province},
    success:function(data){
        alert(data.length);
        var mydata1 = new Array(0);
        for(var i=0;i<data.length;i++){
            var c = {};
            c["name"] = data[i].name+\'市\';
            c["value"] = data[i].value;
            mydata1.push(c);
        }
        myChart.setOption({        //加载数据图表
            series: [{
                data: mydata1
            }]
        });
    },
    error:function(){
        alert("请求失败");
    },
    dataType:"json"
});




</script>


</body>
</html>

View Code

3、servlet

package com.me.servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.me.dao.InfoDao;
import com.me.domain.City;
import com.me.domain.Info;

/**
 * 
 * @author 王正帅
 * @date: 2020年3月3日 下午3:51:12 
 *
 */
@WebServlet("/info")
public class InfoServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    InfoDao dao = new InfoDao();
    public InfoServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        String method = request.getParameter("method");
        if(method.equals("bg")) {
            try {
                bg(request, response);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }else if(method.equals("tu")) {
            try {
                tu(request, response);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }else if(method.equals("city")) {
            try {
                city(request, response);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }else if(method.equals("d")) {
            try {
                d(request, response);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        //response.getWriter().append("Served at: ").append(request.getContextPath());
    }
    /**
     * @param request
     * @param response
     */
    private void d(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException {
        // TODO Auto-generated method stub
        String province = request.getParameter("province");
        String time = "2020-02-12 10:14:15";
        List<Info> list = dao.getListC(time,province);
        List<City> data = new ArrayList<City>();
        for(int i=1; i<list.size();i++) {
            City city = new City();
            city.setName(list.get(i).getCity());
            city.setValue(Integer.parseInt(list.get(i).getConfirmed_num()));
            data.add(city);
        }
        Gson gson = new Gson();
        String json = gson.toJson(data);
        System.out.println(json);
        response.getWriter().write(json);
    }

    /**
     * @param request
     * @param response
     */
    private void city(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException {
        // TODO Auto-generated method stub
        String province = request.getParameter("province");
        String time = "2020-02-12 10:14:15";
        List<Info> list = dao.getListC(time,province);
        List<City> data = new ArrayList<City>();
        for(int i=1; i<list.size();i++) {
            City city = new City();
            city.setName(list.get(i).getCity());
            city.setValue(Integer.parseInt(list.get(i).getConfirmed_num()));
            data.add(city);
        }
        Gson gson = new Gson();
        String json = gson.toJson(data);
        System.out.println(json);
        request.setAttribute("list", json);
        request.setAttribute("province", province);
        request.getRequestDispatcher("city.jsp").forward(request, response);
    }

    /**
     * @param request
     * @param response
     */
    private void tu(HttpServletRequest request, HttpServletResponse response)throws SQLException, ServletException, IOException {
        String time = request.getParameter("time");
        List<Info> list = dao.getListT(time);
        Gson gson = new Gson();
        String json = gson.toJson(list);
        //System.out.println(json);
        request.setAttribute("list", list);
        response.getWriter().write(json);
    }

    /**
     * @param request
     * @param response
     * @throws SQLException 
     * @throws IOException 
     * @throws ServletException 
     */
    private void bg(HttpServletRequest request, HttpServletResponse response) throws SQLException, ServletException, IOException {
        String time = request.getParameter("time");
        List<Info> list = dao.getList(time);
        request.setAttribute("list", list);
        if(list!=null) {
            System.out.println(list.get(0).getDate());
            request.getRequestDispatcher("di.jsp").forward(request, response);
        }else {
            request.getRequestDispatcher("index.jsp").forward(request, response);
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

4、dao

package com.me.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.me.domain.Info;
import com.me.utils.DBUtils;

/**
 * @author 王正帅
 * @date: 2020年3月3日 下午3:39:20 
 * 
 */
public class InfoDao {

    /**
     * @return
     * @throws SQLException 
     */
    public List<Info> getList(String date) throws SQLException {
        QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
        String sql = "select * from info1 where date = ?";
        List<Info> query = qr.query(sql, new BeanListHandler<Info>(Info.class),date);
        return query;
    }
    public List<Info> getListT(String date) throws SQLException {
        QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
        String sql = "select * from info1 where date = ? ";
        List<Info> query = qr.query(sql, new BeanListHandler<Info>(Info.class),date);
        return query;
    }
    public List<Info> getListC(String date,String province) throws SQLException {
        QueryRunner qr = new QueryRunner(DBUtils.getDataSource());
        String sql = "select * from info1 where date = ? and province =?";
        List<Info> query = qr.query(sql, new BeanListHandler<Info>(Info.class),date,province);
        return query;
    }
    
}

View Code

四、运行测试

 

 

 

版权声明：本文为20183544-wangzhengshuai原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/20183544-wangzhengshuai/p/12409216.html