• 疫情图表化查询


    一:

    实现功能: 从数据库读取疫情的数据信息,并将其用表格形式和柱状图表示出来:

    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=" 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="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>
    show.jsp
     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="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="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="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="200px;height: 30px;font-size: 20px" type="date" name="time"   id="time" value="${param.time}"> --%>
    31 <!--             <br/> -->
    32             
    33             <input style="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>
    index.jsp
      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 }
    info.java
     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 }
    infos.java
     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 }
    dao.java
     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 }
    MainServlet.java
      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 }
    DBUtil.java
  • 相关阅读:
    DTree中致命的递归
    通过CLR同步SQL Server和Sharepoint List数据(三)
    通过CLR同步SQL Server和Sharepoint List数据(四)
    C#中操作IIS 7.0
    可爱又可恨的梅花雪
    通过CLR同步SQL Server和Sharepoint List数据(一)
    在Javascript中调用WSS
    VBA在Excel中的应用(二)
    自己编写存储过程对Oracle中的序列进行重置
    在Javascript中实现伪哈希表
  • 原文地址:https://www.cnblogs.com/cxy0210/p/12411374.html
Copyright © 2020-2023  润新知