Echart图表
做题思路：
先在jsp文件中做一个日期查询的界面，获取输入日期，传到servlet层，在讲输入日期传到Dao层，在Dao层中依据日期在数据库筛选出符合条件的数据，利用List<>传到servlet层中，在讲数据传到jsp文件中，用<c:forEach>来获取数据动态显示在表格之中，然后在按同样的操作复制到X,Y坐标上。然后显示出echart表图。
echart.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>Insert title here</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/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 id="main" style="width: 600px;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="${list}" var="item">
arr[index++] = ${item.confirmed_num};
</c:forEach>
// 指定图表的配置项和数据
var option = {
title: {
text: '全国疫情统计'
},
tooltip: {
show: true
},
legend: {
data:['患者数']
},
xAxis : [
{
type : 'category',
axisLabel:{
interval:0,//横轴信息全部显示
rotate:40,//-30度角倾斜显示
},
data : [
<c:forEach items="${list}" var="item">
["${item.province}"],
</c:forEach>
]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'患者数',
type:'bar',
data: arr
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<table >
<form action="selectServlet" method="post">
<table style="position:relative;top:20px;left:30px">
<tr>
<td>请输入日期：</td>
<td><input type="text" name="starttime" style="width:150px;" placeholder="#2020-03-03"></td>
<td ><input type ="submit" value="查询" style="width:80px;" ></td>
</tr>
</table>
</form>
<br>
<table border="1">
<tr>
<td>序号</td>
<td>省份</td>
<td>确诊人数</td>
<td>治愈人数</td>
</tr>
<c:forEach items="${list}" var="item" >
<tr>
<td>${item.id}</td>
<td>${item.province}</td>
<td>${item.confirmed_num}</td>
<td>${item.cured_num}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
Bean:
package Bean;
public class shengfen {
public String province;
public int id;
public int confirmed_num;
public int cured_num;
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getConfirmed_num() {
return confirmed_num;
}
public void setConfirmed_num(int confirmed_num) {
this.confirmed_num = confirmed_num;
}
public int getCured_num() {
return cured_num;
}
public void setCured_num(int cured_num) {
this.cured_num = cured_num;
}
public shengfen(String province, int id, int confirmed_num, int cured_num) {
super();
this.province = province;
this.id = id;
this.confirmed_num = confirmed_num;
this.cured_num = cured_num;
}
}
Dao:
package Dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import Bean.shengfen;
import DBUtil.DBUtil;
public class Dao {
static int id = 1;
public List<shengfen> selecttime(String starttime) {
String sql="select * from info where Date = '"+starttime+"' and City = '' ";
System.out.println(sql);
Connection conn = DBUtil.getConn();
Statement stat = null;
List<shengfen> list = new ArrayList<>();
ResultSet rs = null;
shengfen sf =null;
try {
stat = conn.createStatement();
rs = stat.executeQuery(sql);
while(rs.next()) {
String Province = rs.getString("Province");
int Confirmed_num = rs.getInt("Confirmed_num");
int Cured_num = rs.getInt("Cured_num");
sf = new shengfen(Province,id,Confirmed_num,Cured_num);
id++;
list.add(sf);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
id = 1;
return list;
}
}
selectServlet:
package Servlet; import java.io.IOException; 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 Bean.shengfen; import Dao.Dao; /** * Servlet implementation class selectServlet */ @WebServlet("/selectServlet") public class selectServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public selectServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String starttime = request.getParameter("starttime"); Dao dao = new Dao(); java.util.List<shengfen> list = dao.selecttime(starttime); System.out.println(list); if(list != null) { request.setAttribute("list", list); request.getRequestDispatcher("achart.jsp").forward(request, response); }else { request.setAttribute("message", "数据获取失败！"); request.getRequestDispatcher("achart.jsp").forward(request, response); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
