全国疫情统计可视化地图（第一阶段）

DBUtil.java

package com.helloechart;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DBUtil {

    public static String db_url = "jdbc:mysql://localhost:3306/test?useSSL=false&characterEncoding=UTF-8&serverTimezone=GMT";
    public static String db_user = "root";
    public static String db_pass = "root";

    public static Connection getConn () {
        Connection conn = null;

        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(db_url, db_user, db_pass);
        } catch (Exception e) {
            e.printStackTrace();
        }

        return conn;
    }

    public static void close (Statement state, Connection conn) {
        if (state != null) {
            try {
                state.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

    public static void close (ResultSet rs, Statement state, Connection conn) {
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (state != null) {
            try {
                state.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

}

Get.java

package com.helloechart;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class Get {
    public List<Info> listAll(String date1,String date2) {
        ArrayList<Info> list = new ArrayList<>();
        Connection conn=DBUtil.getConn();
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        String sql="select * from info where Date between ? and ?";
        try {
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, date1);
            pstmt.setString(2, date2);
            rs = pstmt.executeQuery();
            while (rs.next()) {
                Info yq = new Info();
                yq.setId(rs.getInt(1));
                yq.setDate(rs.getString(2));
                yq.setProvince(rs.getString(3));
                yq.setCity(rs.getString(4));
                yq.setConfirmed_num(rs.getString(5));
                yq.setYisi_num(rs.getString(6));
                yq.setCured_num(rs.getString(7));
                yq.setDead_num(rs.getString(8));
                yq.setCode(rs.getString(9));
                list.add(yq);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                conn.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return list;
    }
}

Info.java

package com.helloechart;

public class Info {
    private int id;
    private String city;
    private String yisi_num;
    private String date;
    private String province;
    private String confirmed_num;
    private String cured_num;
    private String dead_num;
    private String code;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public String getYisi_num() {
        return yisi_num;
    }
    public void setYisi_num(String yisi_num) {
        this.yisi_num = yisi_num;
    }
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }
    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    public String getConfirmed_num() {
        return confirmed_num;
    }
    public void setConfirmed_num(String confirmed_num) {
        this.confirmed_num = confirmed_num;
    }
    public String getCured_num() {
        return cured_num;
    }
    public void setCured_num(String cured_num) {
        this.cured_num = cured_num;
    }
    public String getDead_num() {
        return dead_num;
    }
    public void setDead_num(String dead_num) {
        this.dead_num = dead_num;
    }

}

YqServlet.java

package com.helloechart;

import java.io.IOException;
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 javax.servlet.http.HttpSession;

import com.google.gson.Gson;

/**
 * Servlet implementation class SearchConfirmedServlet
 */
@WebServlet("/YqServlet")
public class YqServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    Get get=new Get();
    /**
     * @see HttpServlet#HttpServlet()
     */
    public YqServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String method = request.getParameter("method");
        if(method.equals("getAllProvince")) {
            getAllProvince(request, response);
        }else if(method.equals("getAllConfirmed")) {
            getAllConfirmed(request, response);
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
    protected void getAllProvince(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        String date1 = request.getParameter("date1");
        String date2 = request.getParameter("date2");
        List<Info> list = get.listAll(date1,date2);
        request.setAttribute("list",list);
        request.setAttribute("date1",date1);
        request.setAttribute("date2",date2);
        request.getRequestDispatcher("bar.jsp").forward(request, response);
    }

    protected void getAllConfirmed(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        String date1 = request.getParameter("date1");
        String date2 = request.getParameter("date2");
        System.out.println(date1);
        System.out.println(date2);
        List<Info> list = get.listAll(date1,date2);
        HttpSession session = request.getSession();
        session.setAttribute("list",list);
        Gson gson = new Gson();
        String json = gson.toJson(list);
        response.getWriter().write(json);
    }
}

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<style type="text/css">
    .skyblue{
        background:skyblue;
    }
    .pink{
        background:pink;
    }
    *{
        margin:0px;
        padding:0px;
    }
    a{
        font-size:15px;
    }

</style>
</head>
<body>
    <div class="container">
        <form action="YqServlet?method=getAllProvince" method="post">
            <div class="row" style="padding-top: 20px">
                <div class="col-xs-4">
                    <h4>起始时间：</h4>
                    <input type="text" class="form-control" name="date1">
                </div>
                <div class="col-xs-4">
                    <h4>终止时间：</h4>
                    <input type="text" class="form-control" name="date2">
                </div>
                <div class="col-xs-2">
                    <input type="submit" class="btn btn-default" value="查询">
                </div>
            </div>
        </form>

    </div>
</body>
</html>

bar.jsp

<%@ 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">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
</head>
<script type="text/javascript">
var dt;
function getAllConfirmed(){

    var date1 = "${date1}";
    var date2 = "${date2}";
$.ajax({
    url:"YqServlet?method=getAllConfirmed",
    async:false,
    type:"POST",
    data:{"date1":date1,
          "date2":date2
         },
    success:function(data){
        dt = data;
        //alert(dt);
    },
    error:function(){
        alert("请求失败");
    },
    dataType:"json"
});

    var myChart = echarts.init(document.getElementById(‘yiqingchart‘));
    var xd = new Array(0)//长度为33
    var yd = new Array(0)//长度为33
    for(var i=0;i<32;i++){
        xd.push(dt[i].province);
        yd.push(dt[i].confirmed_num);
    }
        // 指定图表的配置项和数据
       var option = {
        title: {
            text: ‘全国各省的确诊人数‘
        },
        tooltip: {
            show: true,
            trigger: ‘axis‘

        },
        legend: {
            data: [‘确诊人数‘]
        },
        grid: {
            left: ‘3%‘,
            right: ‘4%‘,
            bottom: ‘3%‘,
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: ‘category‘,
            boundaryGap: false,
            axisLabel:{
                                        //横坐标上的文字斜着显示 文字颜色 begin
                                             interval:0,
                                             rotate:45,
                                             margin:60,
                                             textStyle:{color:"#ec6869" }
                                        //横坐标上的文字换行显示 文字颜色end
                                             },
            data: xd
        },
        yAxis: {
            type: ‘value‘
        },
        series: [
            {
                name: ‘确诊人数‘,
                type: ‘bar‘,
                stack: ‘总量‘,
                data: yd,
                barWidth:20,
                barGap:‘10%‘
            }
        ]
    };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
}
</script>
<body>
    <button class="btn btn-default" onclick="getAllConfirmed()" style="padding-top:20px;font-size:20px">柱状图</button>
    <div id="yiqingchart" style="width:900px; height: 600px;">

    </div>
    <table class="table table-striped" style="font-size:20px">
        <tr>
            <td>编号</td>
            <td>日期</td>
            <td>省份</td>
            <td>城市</td>
            <td>确诊人数</td>
            <td>疑似人数</td>
            <td>治愈人数</td>
            <td>死亡人数</td>
        </tr>
        <c:forEach items="${list}" var="info">
        <tr>
            <td>${info.id}</td>
            <td>${info.date}</td>
            <td>${info.province}</td>
            <td>${info.city}</td>
            <td>${info.confirmed_num}</td>
            <td>${info.yisi_num}</td>
            <td>${info.cured_num}</td>
            <td>${info.dead_num}</td>
        </tr>
        </c:forEach>
    </table>
</body>
</html>

原文地址：https://www.cnblogs.com/xhj1074376195/p/12420142.html

时间： 2024-08-30 15:33:06

全国疫情统计可视化地图（第一阶段）的相关文章

课堂练习-全国疫情统计可视化地图

1 第一阶段目标:导入全国疫情数据库payiqing.sql(MySQL数据库).可以按照时期查询各个省市的疫情统计表格.以折线图或柱状图展示某天的全国各省的确诊人数. 1.首先完成数据库的导入,然后编写数据库代码.建立DBUtil.java.实现相关数据的查询,并转化为json,以供Echart柱状图获取数据使用. package dbutil; import java.sql.Connection; import java.sql.Date; import java.sql.DriverMa

全国疫情统计可视化地图（2）

第二阶段的要求是通过地图展示全国疫情的情况. 1:首先要下载中国地图的插件 china.js  ,由于目前Echarts官网已经不提供地图的下载.下面是echarts.min.js  china.js和各个省份地图的js的资源,方便大家下载. 链接: https://pan.baidu.com/s/1MFt-0LqAUQXzpiI1qy-Q0w 提取码: q7y4 2: 要将数据库中数据传进地图去,自然要书写相应的bean目录.dao层以及servlet.bean目录的话不用多说,和之前的代码一

全国疫情统计可视化地图（3）

第三阶段是数据下钻,要求点击省可以下钻到各个地市的数据显示. 1:首先,要显示相应的地图需要导入相应的js 上一篇文章中分享的链接同样包含各个省份的js  链接: https://pan.baidu.com/s/1MFt-0LqAUQXzpiI1qy-Q0w 提取码: q7y4.点击省可以跳转到地市,所以需要在 myChart.on中加一个跳转的语句.语句中加上时间和省份,用于查找. myChart.on('click', function (params) { var url = "Hebei

全国疫情统计可视化（图表）

题目描述           问题分析 使用Echarts处理柱形图 源码 前台的目录结构 构建路径 后台的路径 后台的代码 1 package com.pjh.DBUtils; 2 3 import java.sql.Connection; 4 import java.sql.DriverManager; 5 import java.sql.PreparedStatement; 6 import java.sql.ResultSet; 7 import java.sql.SQLExceptio

全国疫情统计地图可视化(1)

写在前面 该思路借鉴了王正帅同学和张凯鑫同学的博客(地址:https://www.cnblogs.com/20183544-wangzhengshuai/p/12405503.html和 https://www.cnblogs.com/wuren-best/p/12404361.html),并在其基础上进行了修改和改进. 题目要求: 在全国地图上使用不同的颜色代表大概确诊人数区间,颜色的深浅表示疫情的严重程度,可以直观了解高危区域: 鼠标移到每个省份会高亮显示.点击鼠标会显示该省具体疫情情况.点

结对第一次—某次疫情统计可视化（原型设计）

https://w7if3z.axshare.com/#id=mx82vm&p=page_1 原文地址:https://www.cnblogs.com/hylog/p/12370065.html

实验二：结对编程 第一阶段

一.实验目标: 1)体验敏捷开发中的两人合作. 2)进一步提高个人编程技巧与实践. 二 .实验内容: 1)根据以下问题描述,练习结对编程(pair programming)实践: 2)要求学生两人一组,自由组合.每组使用一台计算机,二人共同编码,完成实验要求. 3)要求在结对编程工作期间,两人的角色至少切换 4 次: 4)编程语言不限,版本不限.建议使用 Python 或 JAVA 进行编程. 三.问题描述 四则运算:开发一个自动生成小学四则运算题目的命令行 “软件”.实现 输入你要出题的个数,

Linux运维课程 第一阶段 重难点摘要（三）CISCO

第一阶段重难点笔记汇总(三)cisco 一.简介:IOS(Internetwork Operating System),其配置通常通过基于文本的命令行接口(command line interface,CLI)进行的. 1.基本操作: 操作模式切换 a用户模式:Router>       通常查看统计信息 b特权模式:Router>enable Router#           #查看和修改路由器的配置 Router#disable C全局配置模式:Router#configuration

《UML大象》第一阶段阅读总结

全书分为准备篇.基础篇.进阶篇和总结篇四个部分.我的阅读计划分为三个阶段,所以我把最后两个部分列为了一个阶段,在第一阶段我阅读了准备篇. 准备篇讲述面向对象分析的一些基本概念,及学习建模需要了解的一些基本知识. 这些知识在我们之前的学习中都有涉及到,我简单整理了一下. 面向对象是基于一种哲学思想,它认为:客观实体和实体之间的联系构成了现实世界的所有问题,而每一个实体都可以抽象为对象.这种思想尽可能地按照人类认识世界的方法和思维方式来分析和解决问题,使人们分析.设计一个系统的方法尽可能接近认识一个