疫情图表化查询
一:
实现功能: 从数据库读取疫情的数据信息,并将其用表格形式和柱状图表示出来:
1. 图形的表示使用了ECharts 如果想要自定义数据 我还调用的其中 的Dateset 属性
2.在编写程序的过程中,将读取的数据导入到Dateset 的source 内遇到了困难,在开始之时逍遥使用 <c:foreach> </c:foreach>
遍历来将数据导入,但是出现了问题,自己不能解决,最后切换思路,在jsp 中调用Java代码 ,调用request 获取信息,通过遍历来导入数据结局问题。
3.对于ECharts 的js 文件下载(搞了我好久的小问题):
在官网下载:
https://www.echartsjs.com/zh/index.html
当我 点击下载是,js文件直接被打开(就这里搞了好久,不知道怎么下载)。
点击右键,另存为就可以保存js 文件了,然后在根据相对路径进行引用(最好找到一个专门存放js 文件的文件夹,便于查找引用)
二:
运行示例:
三:
源码:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <%@page import="com.Bean.infos"%> 5 <%@page import="java.util.List"%> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="utf-8"> 10 <title>ECharts</title> 11 <!-- 引入 echarts.js --> 12 <script src="js/echarts.js"></script> 13 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 14 </head> 15 <body> 16 <% 17 request.setCharacterEncoding("utf-8"); 18 List <infos> list =(List<infos>) request.getAttribute("list"); 19 20 int i=0; 21 %> 22 23 24 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> 25 <div id="main" style="width: 1200px;height:800px;"></div> 26 <script type="text/javascript"> 27 // 基于准备好的dom,初始化echarts实例 28 var myChart = echarts.init(document.getElementById('main')); 29 30 var option = { 31 dataset: { 32 source: [ 33 [ '省份','确诊人数'], 34 <% 35 //获取request域中的数据 36 if(list!=null){ 37 for(infos info:list){i++; 38 %> 39 [<%=Integer.parseInt(info.getConfirmed_num())%>,'<%=info.getDate()%>'], 40 <% 41 //后边的省份重复 第33 42 if(i>33)break; 43 } 44 45 } 46 %> 47 ] 48 }, 49 grid: {containLabel: true}, 50 xAxis: {}, 51 yAxis: {type: 'category'}, 52 53 visualMap: { 54 orient: 'horizontal', 55 left: 'center', 56 min: 10, 57 max: 100, 58 text: ['严重地区感染人数', '轻度地区感染人数'], 59 // Map the score column to color 60 dimension: 0, 61 inRange: { 62 color: ['#D7DA8B', '#E15457'] 63 } 64 }, 65 66 67 68 69 70 71 72 series: [ 73 { 74 type: 'bar', 75 encode: { 76 // 将 "amount" 列映射到 X 轴。 77 x: '省份', 78 // 将 "product" 列映射到 Y 轴。 79 y: '确诊人数' 80 } 81 }] 82 }; 83 84 85 86 87 88 // 使用刚指定的配置项和数据显示图表。 89 myChart.setOption(option); 90 </script> 91 <div align="center"> 92 <table border="1" style="width:600px;height:40px;font-size: 20px" > 93 <tr> 94 <td>省份</td> 95 <td>城市</td> 96 <td>确诊人数</td> 97 <td>治愈人数</td> 98 <td>死亡人数</td> 99 </tr> 100 101 <% 102 if(list!=null){ 103 for(infos info:list){ 104 105 106 %> 107 <tr> 108 <td><%=info.getDate()%></td> 109 <td><%=info.getCity()%></td> 110 <td><%=info.getConfirmed_num()%></td> 111 <td><%=info.getCure()%></td> 112 <td><%=info.getDead()%></td> 113 </tr> 114 <% 115 } 116 } 117 %> 118 </table> 119 </div> 120 121 </body> 122 </html>
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="UTF-8"> 7 <title>全国疫情查询</title> 8 </head> 9 <body> 10 11 <div align="center"> 12 <section> 13 <form action="MainServlet?method=search" method="post" onsubmit="return check()"> 14 <span ><font size="5" color="black"> 查询日期:</font></span> 15 <input style="width:200px;height: 30px;font-size: 20px" type="text" name="name" id="name" > 16 <br/> 17 18 <!-- <span ><font size="5" color="black">开始日期:</font></span> --> 19 <!-- <input style="width:200px;height: 30px;font-size: 20px" type="text" name="cost" id="cost" "> --> 20 <!-- <br/> --> 21 22 23 24 <!-- <span ><font size="5" color="black">结束日期:</font></span> --> 25 <!-- <input style="width:200px;height: 30px;font-size: 20px" type="text" name="place" id="place" > --> 26 <!-- <br/> --> 27 28 29 <!-- <span ><font size="5" color="black">消费时间:</font></span> --> 30 <%-- <input style="width:200px;height: 30px;font-size: 20px" type="date" name="time" id="time" value="${param.time}"> --%> 31 <!-- <br/> --> 32 33 <input style="width:50px;height: 40px;font-size: 15px" type="submit" value="查询" onclick="return on_click()"> 34 <br/> 35 </form> 36 </section> 37 </div> 38 39 40 41 </body> 42 </html>
1 package com.Bean; 2 3 public class info { 4 private String Date; 5 private String Province; 6 private String City; 7 8 private String Yisi_number; 9 10 11 private String Code; 12 private String New_Confirmed_num; 13 private String Confirmed_num; 14 private String Dead_num; 15 private String Zhong_num; 16 private String Cured_number; 17 private String url; 18 19 20 21 public info(String date, String city, String new_Confirmed_num, String confirmed_num, String dead_num, 22 String zhong_num, String cured_number, String url) { 23 super(); 24 Date = date; 25 City = city; 26 New_Confirmed_num = new_Confirmed_num; 27 Confirmed_num = confirmed_num; 28 Dead_num = dead_num; 29 Zhong_num = zhong_num; 30 Cured_number = cured_number; 31 this.url = url; 32 } 33 public info(String date2, String confirmed_num2) { 34 35 Date=date2; 36 Confirmed_num=confirmed_num2; 37 } 38 public String getNew_Confirmed_num() { 39 return New_Confirmed_num; 40 } 41 public void setNew_Confirmed_num(String new_Confirmed_num) { 42 New_Confirmed_num = new_Confirmed_num; 43 } 44 public String getZhong_num() { 45 return Zhong_num; 46 } 47 public void setZhong_num(String zhong_num) { 48 Zhong_num = zhong_num; 49 } 50 public String getUrl() { 51 return url; 52 } 53 public void setUrl(String url) { 54 this.url = url; 55 } 56 public String getDate() { 57 return Date; 58 } 59 public void setDate(String date) { 60 Date = date; 61 } 62 public String getProvince() { 63 return Province; 64 } 65 public void setProvince(String province) { 66 Province = province; 67 } 68 public String getCity() { 69 return City; 70 } 71 public void setCity(String city) { 72 City = city; 73 } 74 public String getConfirmed_num() { 75 return Confirmed_num; 76 } 77 public void setConfirmed_num(String confirmed_num) { 78 Confirmed_num = confirmed_num; 79 } 80 public String getYisi_number() { 81 return Yisi_number; 82 } 83 public void setYisi_number(String yisi_number) { 84 Yisi_number = yisi_number; 85 } 86 public String getCured_number() { 87 return Cured_number; 88 } 89 public void setCured_number(String cured_number) { 90 Cured_number = cured_number; 91 } 92 public String getDead_num() { 93 return Dead_num; 94 } 95 public void setDead_num(String dead_num) { 96 Dead_num = dead_num; 97 } 98 public String getCode() { 99 return Code; 100 } 101 public void setCode(String code) { 102 Code = code; 103 } 104 105 106 107 }
1 package com.Bean; 2 3 public class infos { 4 private String Date; 5 private String Confirmed_num; 6 private String city; 7 private String cure; 8 private String dead; 9 public String getCity() { 10 return city; 11 } 12 public void setCity(String city) { 13 this.city = city; 14 } 15 public String getCure() { 16 return cure; 17 } 18 public void setCure(String cure) { 19 this.cure = cure; 20 } 21 public String getDead() { 22 return dead; 23 } 24 public void setDead(String dead) { 25 this.dead = dead; 26 } 27 public String getDate() { 28 return Date; 29 } 30 public void setDate(String date) { 31 Date = date; 32 } 33 public String getConfirmed_num() { 34 return Confirmed_num; 35 } 36 public void setConfirmed_num(String confirmed_num) { 37 Confirmed_num = confirmed_num; 38 } 39 public infos(String date, String confirmed_num) { 40 super(); 41 Date = date; 42 Confirmed_num = confirmed_num; 43 } 44 public infos(String date, String confirmed_num, String city, String cure, String dead) { 45 super(); 46 Date = date; 47 Confirmed_num = confirmed_num; 48 this.city = city; 49 this.cure = cure; 50 this.dead = dead; 51 } 52 53 54 55 56 }
1 package com.Dao; 2 3 import java.sql.Connection; 4 import java.sql.ResultSet; 5 import java.sql.SQLException; 6 import java.sql.Statement; 7 import java.util.ArrayList; 8 import java.util.List; 9 10 import com.Bean.info; 11 import com.Bean.infos; 12 import com.DBUtil.DBUtil; 13 14 public class Dao { 15 16 /*public static List<infos> search(String name, String money, String place) throws Exception { 17 Connection conn = DBUtil.getConn(); 18 List<infos> list= new ArrayList<infos>(); 19 Statement state=null; 20 //sql 语句查询的顺序不能颠倒 21 String sql="select * from hebei_city_info where Date between '"+money+"' and '"+place+"' and City like '%"+name+"%'"; 22 //String sql="select * from hebei_city_info where City like '%"+name+"%'"; 23 state=conn.createStatement(); 24 ResultSet rs=state.executeQuery(sql); 25 System.out.println("666"); 26 infos info=null; 27 28 while(rs.next()) { 29 30 String City=rs.getString("City"); 31 String Date=rs.getString("Date"); 32 String New_Confirmed_num=rs.getString("New_Confirmed_num"); 33 String Confirmed_num=rs.getString("Confirmed_num"); 34 String Dead_num=rs.getString("Dead_num"); 35 String Zhong_num=rs.getString("Zhong_num"); 36 String Cured_num=rs.getString("Cured_num"); 37 String url= rs.getString("Url"); 38 System.out.println(City+Date+New_Confirmed_num+Confirmed_num+Dead_num+Zhong_num+Cured_num+url); 39 info= new infos(Date,Confirmed_num); 40 //infos = new info(Date,City,New_Confirmed_num,Confirmed_num,Dead_num,Zhong_num,Cured_num,url); 41 list.add(info); 42 } 43 44 45 46 return list; 47 // TODO Auto-generated method stub 48 49 }*/ 50 51 public static List<infos> search2(String name) throws Exception { 52 // TODO Auto-generated method stub 53 Connection conn = DBUtil.getConn(); 54 List<infos> list= new ArrayList<infos>(); 55 Statement state=null; 56 //sql 语句查询的顺序不能颠倒 57 String sql="select * from info where Date like '%"+name+"%'" ; 58 state=conn.createStatement(); 59 ResultSet rs=state.executeQuery(sql); 60 System.out.println("666"); 61 infos info=null; 62 63 while(rs.next()) { 64 65 66 String Confirmed_num=rs.getString("Confirmed_num"); 67 String Pr=rs.getString("Province"); 68 69 String city=rs.getString("City"); 70 String cure=rs.getString("Cured_num"); 71 String dead=rs.getString("Cured_num"); 72 73 info= new infos(Pr,Confirmed_num,city,cure,dead); 74 list.add(info); 75 } 76 return list; 77 } 78 79 }
1 package com.Servlet; 2 3 import java.io.IOException; 4 import java.io.UnsupportedEncodingException; 5 import java.util.List; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.annotation.WebServlet; 9 import javax.servlet.http.HttpServlet; 10 import javax.servlet.http.HttpServletRequest; 11 import javax.servlet.http.HttpServletResponse; 12 13 import com.Bean.info; 14 import com.Bean.infos; 15 import com.Dao.Dao; 16 17 /** 18 * Servlet implementation class MainServlet 19 */ 20 @WebServlet("/MainServlet") 21 public class MainServlet extends HttpServlet { 22 private static final long serialVersionUID = 1L; 23 24 /** 25 * @see HttpServlet#HttpServlet() 26 */ 27 protected void service(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException 28 { 29 req.setCharacterEncoding("UTF-8"); 30 31 String method = req.getParameter("method"); 32 if(method.equals("search")) { 33 try { 34 search(req,resp); 35 } catch (Exception e) { 36 // TODO Auto-generated catch block 37 e.printStackTrace(); 38 } 39 } 40 } 41 42 private void search(HttpServletRequest req, HttpServletResponse resp) throws Exception { 43 // TODO Auto-generated method stub 44 try { 45 req.setCharacterEncoding("UTF-8"); 46 } catch (UnsupportedEncodingException e) { 47 // TODO Auto-generated catch block 48 e.printStackTrace(); 49 } 50 51 String name=req.getParameter("name"); 52 53 List<infos> list = Dao.search2(name); 54 req.setAttribute("list", list); 55 req.getRequestDispatcher("show.jsp").forward(req, resp); 56 57 58 } 59 60 }
1 package com.DBUtil; 2 /** 3 * 测试时主要要导入jar 4 */ 5 6 import java.beans.Statement; 7 import java.sql.Connection; 8 import java.sql.DriverManager; 9 import java.sql.PreparedStatement; 10 import java.sql.ResultSet; 11 import java.sql.SQLException; 12 13 /** 14 * 建立数据库连接 15 * @author cuixingyu 16 * 17 */ 18 public class DBUtil { 19 // 连接数据库 url路径和用户名 密码 20 public static String db_url="jdbc:mysql://localhost:3306/db_database06?serverTimezone=UTC&characterEncoding=UTF-8&useSSL=false&allowPublicKeyRetrieval=true"; 21 public static String db_user="root"; 22 public static String db_password="101032"; 23 public static Connection getConn() { 24 Connection conn=null; 25 try { 26 // 数据库驱动加载 27 Class.forName("com.mysql.cj.jdbc.Driver"); 28 try { 29 //链接数据库 30 conn=DriverManager.getConnection(db_url, db_user, db_password); 31 } catch (SQLException e) { 32 // TODO Auto-generated catch block 33 e.printStackTrace(); 34 } 35 System.out.println("驱动链接加载成功!"); 36 } catch (ClassNotFoundException e) { 37 // TODO Auto-generated catch block 38 e.printStackTrace(); 39 } 40 //返回链接 41 return conn; 42 43 } 44 45 //关闭函数 46 public static void close(Statement state,Connection conn) { 47 //只有状态和连接时,先关闭状态 48 if(state!=null) { 49 try { 50 ((Connection) state).close(); 51 } catch (SQLException e) { 52 // TODO Auto-generated catch block 53 e.printStackTrace(); 54 } 55 56 57 } 58 if(conn!=null) { 59 try { 60 conn.close(); 61 } catch (SQLException e) { 62 // TODO Auto-generated catch block 63 e.printStackTrace(); 64 } 65 } 66 } 67 //关闭函数 68 public static void close(PreparedStatement state,Connection conn) { 69 if(state!=null) { 70 try { 71 ((Connection) state).close(); 72 } catch (SQLException e) { 73 // TODO Auto-generated catch block 74 e.printStackTrace(); 75 } 76 77 } 78 if(conn!=null) { 79 try { 80 conn.close(); 81 } catch (SQLException e) { 82 // TODO Auto-generated catch block 83 e.printStackTrace(); 84 } 85 } 86 } 87 88 public static void close(ResultSet rs,Statement state,Connection conn) { 89 if(rs!=null) { 90 try { 91 rs.close(); 92 } catch (SQLException e) { 93 // TODO Auto-generated catch block 94 e.printStackTrace(); 95 } 96 } 97 if(state!=null) { 98 try { 99 ((Connection) state).close(); 100 } catch (SQLException e) { 101 // TODO Auto-generated catch block 102 e.printStackTrace(); 103 } 104 } 105 if(conn!=null) { 106 try { 107 conn.close(); 108 } catch (SQLException e) { 109 // TODO Auto-generated catch block 110 e.printStackTrace(); 111 } 112 } 113 } 114 115 //关闭函数 116 public static void close(java.sql.Statement state, Connection conn) { 117 // TODO Auto-generated method stub 118 if(state!=null) 119 { 120 try { 121 state.close(); 122 } catch (SQLException e) { 123 // TODO Auto-generated catch block 124 e.printStackTrace(); 125 } 126 } 127 if(conn!=null) { 128 try { 129 conn.close(); 130 } catch (SQLException e) { 131 // TODO Auto-generated catch block 132 e.printStackTrace(); 133 } 134 } 135 } 136 //测试主函数 利用Java运行来测试 137 @SuppressWarnings("static-access") 138 public static void main(String[] args) throws SQLException { 139 DBUtil dbu=new DBUtil(); 140 dbu.getConn(); 141 } 142 }