一、题目要求:
1.导入payiqing.sql
2.按照时期查询各个省市的疫情相关代码以及需要导入的jar包
2.1 chart.jsp(查询界面)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="chart/echarts.min.js"></script> </head> <body> <% Object message = request.getAttribute("message"); if (message != null && !"".equals(message)) { %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <% } %> <div align="center"> <h1>各个省市疫情统计表</h1> <br> 日期范围<input type="date" id="btime" name="btime">-<input type="date" id="etime" name="etime"> <button type="button" class="btn btn-info" onclick="checkfind()">查询</button> <br><br> <table> <thead> <tr> <th>编号</th> <th>日期</th> <th align="center">省名</th> <th>市名</th> <th>确诊人数</th> <th>治愈人数</th> <th>死亡人数</th> </tr> </thead> <tbody> <c:forEach items="${pres}" var="item"> <tr class="active"> <td>${item.id}</td> <td>${item.date}</td> <td>${item.name}</td> <td>${item.city}</td> <td>${item.confirmed}</td> <td>${item.cured}</td> <td>${item.dead}</td> </tr> </c:forEach> </tbody> </table> </div> <script type="text/javascript"> function checkfind() { var btime=document.getElementById("btime").value; var etime=document.getElementById("etime").value; if(btime==""||etime==""||(btime==""&&etime=="")) { alert("请填写时间"); return ; } else { window.location.href = "checkfind?btime="+btime+"&etime="+etime; } } </script> <div id="main" style="height:400px"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${pres}" var="goods"> arr[index++] = ${goods.confirmed}; </c:forEach> // 指定图表的配置项和数据 var option = { title: { text: '全国疫情统计' }, tooltip: { show: true }, legend: { data:['患者数'] }, xAxis : [ { type : 'category', data : [ <c:forEach items="${pres}" var="g"> ["${g.name}"], </c:forEach> ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'患者数', type:'bar', data: arr } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
相关jar包
2.2后台代码支持
2.2.1 Pre
package com.yiqing.zzm.po; public class Pre { private int id; private String name; private String city; private String confirmed; private String cured; private String dead; private String date; public String getCity() { return city; } public void setCity(String city) { this.city = city; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getConfirmed() { return confirmed; } public void setConfirmed(String confirmed) { this.confirmed = confirmed; } public String getCured() { return cured; } public void setCured(String cured) { this.cured = cured; } public String getDead() { return dead; } public void setDead(String dead) { this.dead = dead; } public String getDate() { return date; } public void setDate(String date) { this.date = date; } public Pre() { super(); } public Pre(int id, String name, String city, String confirmed, String cured, String dead, String date) { super(); this.id = id; this.name = name; this.city = city; this.confirmed = confirmed; this.cured = cured; this.dead = dead; this.date = date; } public Pre(String name,String confirmed) { super(); this.name = name; this.confirmed = confirmed; } }
2.2.2 predao
package com.yiqing.zzm.dao; import java.sql.*; import java.util.ArrayList; import com.yiqing.zzm.po.Pre; import com.yiqing.zzm.util.DBUtil; public class predao { public ArrayList<Pre> getquanguo() { ArrayList<Pre> list=new ArrayList<>(); String sql="select * from info"; Connection con=null; Statement state=null; ResultSet rs=null; con=DBUtil.getConn(); Pre bean=null; int flag=0; try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { String name=rs.getString("Province"); String confirmed=rs.getString("Confirmed_num"); bean=new Pre(name,confirmed); list.add(bean); if(name.equals("西藏自治区")){ flag=1; } if(flag==1) break; } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } DBUtil.close(rs, state, con); return list; } public ArrayList<Pre> findtime(String btime,String etime) { String begin=""; String []s=btime.split("-"); for(int i=0;i<s.length;i++) begin+=s[i].toString(); String end=""; String []e=etime.split("-"); for(int i=0;i<e.length;i++) end+=e[i].toString(); System.out.println(begin+" "+end); int bg=Integer.valueOf(begin); int ed=Integer.valueOf(end); //System.out.println(bg+" "+end); ArrayList<Pre> list=new ArrayList<>(); String sql="select * from info"; Connection con=null; Statement state=null; ResultSet rs=null; con=DBUtil.getConn(); Pre bean=null; try { state=con.createStatement(); rs=state.executeQuery(sql); while(rs.next()) { int id=rs.getInt("id"); String name=rs.getString("Province"); String city=rs.getString("city"); String confirmed=rs.getString("Confirmed_num"); String cured=rs.getString("Cured_num"); String dead=rs.getString("Dead_num"); String date=rs.getString("Date"); String ans=""; String date2=date.substring(0, 10); String []d=date2.split("-"); for(int i=0;i<d.length;i++) { ans+=d[i].toString(); } int k=Integer.valueOf(ans); System.out.println(k); if(k>=bg&&k<=ed) { bean=new Pre(id,name,city,confirmed,cured,dead,date); list.add(bean); } } } catch (SQLException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } DBUtil.close(rs, state, con); return list; } }
2.2.3 Chart.java
package com.yiqing.zzm.servlet; import java.io.IOException; import java.util.ArrayList; 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.yiqing.zzm.dao.predao; import com.yiqing.zzm.po.Pre; /** * Servlet implementation class Chart */ @WebServlet("/Chart") public class Chart extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public Chart() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); predao dao=new predao(); ArrayList<Pre> list=dao.getquanguo(); request.setAttribute("pres", list); request.getRequestDispatcher("chart.jsp").forward(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); } }
2.2.4 checkfind.java
package com.yiqing.zzm.servlet; import java.io.IOException; import java.util.ArrayList; 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.yiqing.zzm.dao.predao; import com.yiqing.zzm.po.Pre; /** * Servlet implementation class checkfind */ @WebServlet("/checkfind") public class checkfind extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public checkfind() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); String btime=request.getParameter("btime"); String etime=request.getParameter("etime"); predao dao=new predao(); ArrayList<Pre> list=dao.findtime(btime,etime); if(list!=null) { request.setAttribute("pres", list); request.getRequestDispatcher("listall.jsp").forward(request, response); } else { request.setAttribute("message", "当前时间段无病例"); request.getRequestDispatcher("listall.jsp").forward(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); } }
2.2.5 DBUtil.java
package com.yiqing.zzm.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class DBUtil { private static final String db_url="jdbc:mysql://localhost:3306/payiqing?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true"; public static String db_user = "root"; public static String db_pass = "zzm666"; 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; } /** * @param state * @param 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(); } } } }
2.26 运行截图
3.1以柱状图相关代码以及jar包
install.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>浏览需求</title> </head> <body> <% Object message = request.getAttribute("message"); if (message != null && !"".equals(message)) { %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <% } %> <div align="center"> <h1>各个省市疫情统计表</h1> <br> 日期范围<input type="date" id="btime" name="btime">-<input type="date" id="etime" name="etime"> <button type="button" class="btn btn-info" onclick="checkfind()">查询</button> <br><br> <table> <thead> <tr> <th>编号</th> <th>日期</th> <th align="center">省名</th> <th>市名</th> <th>确诊人数</th> <th>治愈人数</th> <th>死亡人数</th> </tr> </thead> <tbody> <c:forEach items="${pres}" var="item"> <tr class="active"> <td>${item.id}</td> <td>${item.date}</td> <td>${item.name}</td> <td>${item.city}</td> <td>${item.confirmed}</td> <td>${item.cured}</td> <td>${item.dead}</td> </tr> </c:forEach> </tbody> </table> </div> <script type="text/javascript"> function checkfind() { var btime=document.getElementById("btime").value; var etime=document.getElementById("etime").value; if(btime==""||etime==""||(btime==""&&etime=="")) { alert("请填写时间"); return ; } else { window.location.href = "checkfind?btime="+btime+"&etime="+etime; } } </script> </body> </html>
程序运行截图:
zz 
编程中有的借鉴了同学的代码，发现自己该学的还是太多太多!