zoukankan html css js c++ java

疫情图表化查询

一：

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

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

查看全文

相关阅读:
C# Socket编程
 C# Socket编程
 Android基础入门教程
 Android基础入门教程
 SQL Server查询事务
 SQL Server查询事务
 SQL事务用法begin tran，commit tran和rollback tran的用法
 SQL事务用法begin tran，commit tran和rollback tran的用法
 SQL Server Insert操作中的锁
 SQL Server Insert操作中的锁

原文地址：https://www.cnblogs.com/cxy0210/p/12411374.html