I use the info table, the table is the number of people diagnosed with the country in various provinces at one point in time; because there is no time to see the design style has become the need to enter the start time and end up;
He began writing a jsp time to upload to the servlet
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 <form action="searchservlet"target="show"method="post"> 11 请输入查询的起始日期：<input type="text" name="beginyear"> 12 请输入要查询的截至日期：<input type="text" name="endyear"> 13 <input type="submit" value="提交"> 14 </form> 15 </body> 16 </html>
searchservlet
import java.io.IOException;
import java.util.ArrayList;
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 com.google.gson.Gson;
@WebServlet("/searchservlet")
public class searchservlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String beginyearString=request.getParameter("beginyear");
String endyearString=request.getParameter("endyear");
List<Data>list=new ArrayList<Data>();
DataDao dataDao DataDao = new ();
list=dataDao.search1(beginyearString, endyearString);
if (list!=null) {
System.out.print ( "Query successful");
request.setAttribute("list", list);
request.getRequestDispatcher("show.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);
}
}
Dao layer and then write SQL statements;
Dao
The servlet then run to completion jump to the function interface show.jsp
1 <%@ page language="java" contentType="text/html; charse=tUTF-8" 2 pageEncoding="UTF-8"%> 3 <%@page import="java.util.List"%> 4 <%@page import="echart.Data"%> 5 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="UTF-8"> 10 <title>信息显示页面</title> 11 </head> 12 <!-- 引入 echarts.js --> 13 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> 14 <script type="text/javascript"> 15 // List<Data>list=request.getAttribute("list"); 16 // var names=new Array(); 17 // var chartData=new Array(); 18 // var length=list.length; 19 // for(i=0;i<length;i++){ 20 // names.pust(list[i].city); 21 // chartData.push(list[i].confirmed_num); 22 // } 23 </script> 24 25 </head> 26 <body> 27 28 29 <% request.setCharacterEncoding("utf-8"); 30 List <Data> provinces =(List<Data>) request.getAttribute("list"); 31 int i=0;%> 32 <div align="center"> 33 <!-- 为ECharts 准备一个具备大小（宽高）的DOM容器 --> 34 <div id="main" align="center" style="width: 1000px;height:600px;" > 35 <script type="text/javascript"> 36 var myChart = echarts.init(document.getElementById('main')); // was option = { 37This option represents a configuration using json data format to draw the graph 38 is DataSet: { 39 40 title: { 41 is text: 'provinces confirmed number' 42 is }, 43 is ToolTip: {}, 44 is Legend: { 45 Data: [ 'confirmed number ' ], 46 is width:' Auto ' , 47 height:' Auto ' 48 }, 49 50 Source: [ 51 is [ 'Department', 'number of diagnosed' ], 52 <% 53 // Get request data field 54 is IF (Provinces =! Null ) { 55 for (the Data Province: Provinces) {I ++ ; 56 is %> 57 is [ '< = province.getProvince% ()%> ',' <% = province.getConfirmed_num ()%> ' ], 58 <% 59 IF (I> 33 is) BREAK ; 60 } 61 62 } 63 %> 64 ] 65 }, 66 Grid: {containLabel: to true }, 67 XAXIS: { 68 type: 'category' }, 69 YAXIS: {}, // configuration items displayed in the outer shaft 70 Series: [ 71 is { 72 name: ' the number of confirmed ' , 73 is type:' bar ' , 74 encode: { 75 // the "amount" columns are mapped to the X-axis. 76 x: 'Department' , 77 // the "product" column is mapped to the Y axis. 78 Y: 'The number of diagnosed' 79 } 80 }] 81 }; 82 83 // use just specified configuration data items and display the chart. 84 myChart.setOption (Option); 85 </ Script> 86 </ div> 87 88 89 </ div> 90 91 is <Table> 92 <TR> 93 <TD> Department </ TD> 94 <TD> persons diagnosed < / td> <td>时间</td> 96 </tr> 97 <c:forEach items="${list }" var="list"> 98 <tr> 99 <td>${list.province }</td> 100 <td>${list.confirmed_num }</td> 101 <td>${list.date }</td> 102 </tr> 103 </c:forEach> 104 </table> 105 106 </body> 107 </html>
At first without any idea, I do not know how to use java to post strong design drawing, and later to calm down, as had also falsified the investigation, as first found, then use echarts design histogram;
echarts can refer here to learn https://www.runoob.com/echarts/echarts-setup.html
In this week's study still be harvested, as well as the following two tasks, continue to fuel!