本项目重点在于对Echart表格的应用.难点是如何将数据从数据库传输到Echart报表上.
在本项目中我所用的方法是将数据库传输到Dao层,然后在Dao层定义2个String数组分别存放Echart所需的省份名数据与确诊数数据.
然后再将数据通过servlet通过缓冲区传入jsp页面,从而放在Echart中.
java层
CollectDataClass coll=new CollectDataClass(); request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); //声明list ArrayList list = new ArrayList(); //声明缓冲区 HttpSession session = request.getSession(); //3.改jiaoli String url = "jdbc:mysql://localhost:3306/cs?&useSSL=false&serverTimezone=UTC&useUnicode=yes&characterEncoding=utf8"; Connection conn = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver"); conn = DriverManager.getConnection(url, "root", "root"); } catch (ClassNotFoundException e) { response.getWriter().print("加载驱动失败"); } catch (SQLException e) { response.getWriter().print("连接数据库失败"); } String start=request.getParameter("start"); String end=request.getParameter("end"); int as=0; String pname[] =new String [330]; String cnum[]=new String[330]; for(int i=0;i<330;i++) { pname[i]=""; cnum[i]="0"; } //************************************* try { Statement stmt = conn.createStatement(); //1.改sql语句 ResultSet rs = stmt.executeQuery("select * from info"); while (rs.next()) { /* String username=new String(rs.getString("username")); user use=new user(username); list.add(use); */ String date=new String(rs.getString("Date")); if(date.compareTo(start)>=0&& date.compareTo(end)<=0) { String province=new String(rs.getString("Province")); String city=new String(rs.getString("City")); String confirmed_num=new String(rs.getString("Confirmed_num")); String cured_num=new String(rs.getString("Cured_num")); String dead_num=new String(rs.getString("Dead_num")); System.out.println(date+" "+province+" "+city+" "+confirmed_num); user use=new user(date,province,city,confirmed_num,cured_num, dead_num); list.add(use); if(city==null || city.equals("")) { pname[as]=province; cnum[as]= confirmed_num; as++; } } } }catch (SQLException e) { response.getWriter().print("查找失败"); } try { Statement stmt = conn.createStatement(); //1.改sql语句 ResultSet rs = stmt.executeQuery("select * from info1"); while (rs.next()) { /* String username=new String(rs.getString("username")); user use=new user(username); list.add(use); */ String date=new String(rs.getString("Date")); if(date.compareTo(start)>=0&& date.compareTo(end)<=0) { String province=new String(rs.getString("Province")); String city=new String(rs.getString("City")); String confirmed_num=new String(rs.getString("Confirmed_num")); String cured_num=new String(rs.getString("Cured_num")); String dead_num=new String(rs.getString("Dead_num")); System.out.println(date+" "+province+" "+city+" "+confirmed_num); user use=new user(date,province,city,confirmed_num,cured_num, dead_num); list.add(use); if(city==null || city.equals("")) { pname[as]=province; cnum[as]= confirmed_num; as++; } } } }catch (SQLException e) { response.getWriter().print("查找失败"); } request.setAttribute("list",list); session.setAttribute("pname",pname); session.setAttribute("cnum",cnum); request.getRequestDispatcher( "index1.jsp").forward(request,response); //***************************************
jsp层:
<%//开头%> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <fmt:requestEncoding value="UTF-8"/> <%@page import="java.text.SimpleDateFormat"%> <%@page import="java.util.*"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <link rel="stylesheet" type="text/css" href="a.css"> <!DOCTYPE html> <html> <head> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> <title>疫情数据统计</title> </head> <style type="text/css"> #main{ position:relative; left: 400px; } .cha{ position:relative; left: 200px; } td{ text-align:center;vertical-align:middle; } .biao{ position:relative; left: 400px; } </style> <body> <%String pname[] =(String[]) session.getAttribute("pname");%> <%String cnum[] =(String[]) session.getAttribute("cnum");%> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <div class="cha"> <form method="post" action="index" name="from1" id="from1" > 请输入查询时间段: <input name="start" id="start" placeholder="yyyy-mm-dd hh:mm:ss"> 至 <input name="end" id="end" placeholder="yyyy-mm-dd hh:mm:ss"> <input class="button" type="submit" name="submit" id="submit" value="提交" onclick="return check(this.form);"> </form> </div> <div class="biao"> <table> <tr> <th>日期</th><th>省份</th><th>城市</th><th>确诊人数</th><th>治愈人数</th><th>死亡人数</th> </tr> <c:forEach items="${list}" var="use" > <tr> <td>${use.date}</td><td>${use.province}</td><td>${use.city}</td><td>${use.confirmed_num}</td><td>${use.cured_num}</td><td>${use.dead_num}</td> </tr> </c:forEach> </table> </div> </body> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '疫情统计确诊人数' }, tooltip: {}, legend: { data:['确诊人数'] }, xAxis: { axisLabel: { interval:0, rotate:40 } , data: ["<%=pname[0]%>","<%=pname[1]%>","<%=pname[2]%>","<%=pname[3]%>","<%=pname[4]%>","<%=pname[5]%>" ,"<%=pname[6]%>","<%=pname[7]%>","<%=pname[8]%>","<%=pname[9]%>","<%=pname[10]%>","<%=pname[11]%>","<%=pname[12]%>" ,"<%=pname[13]%>","<%=pname[14]%>","<%=pname[15]%>","<%=pname[16]%>","<%=pname[17]%>","<%=pname[18]%>","<%=pname[19]%>" ,"<%=pname[20]%>","<%=pname[21]%>","<%=pname[22]%>","<%=pname[23]%>","<%=pname[24]%>","<%=pname[25]%>","<%=pname[26]%>" ,"<%=pname[27]%>","<%=pname[28]%>","<%=pname[29]%>","<%=pname[30]%>","<%=pname[31]%>"] }, yAxis: {}, series: [{ name: '确诊人数', type: 'bar', color:'#2AD1DE', shadowBlur:'2dp', data: [<%=cnum[0]%>,<%=cnum[1]%>,<%=cnum[2]%>, <%=cnum[3]%>,<%=cnum[4]%> ,<%=cnum[5]%> ,<%=cnum[6]%> ,<%=cnum[7]%> ,<%=cnum[8]%> ,<%=cnum[9]%> ,<%=cnum[10]%> ,<%=cnum[11]%> ,<%=cnum[12]%> ,<%=cnum[13]%> ,<%=cnum[14]%> ,<%=cnum[15]%> ,<%=cnum[16]%> ,<%=cnum[17]%> ,<%=cnum[18]%> ,<%=cnum[19]%> ,<%=cnum[20]%> ,<%=cnum[21]%> ,<%=cnum[22]%> ,<%=cnum[23]%> ,<%=cnum[24]%> ,<%=cnum[25]%> ,<%=cnum[26]%> ,<%=cnum[27]%> ,<%=cnum[28]%> ,<%=cnum[29]%> ,<%=cnum[30]%> ,<%=cnum[31]%> ] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </html>