zoukankan html css js c++ java

疫情统计可视化（柱状图）

要求：

思路：

从前台中获取这两个时间数据，在后台进行数据的查询；

借助echart图表，导入echart.min.js；

dao:

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.mysql.jdbc.Statement;
//import com.sun.org.apache.xpath.internal.operations.And;



public class dao {

    public List<information> search1(String beginyear,String endyear){
        int num=0;
        List<information>list=new ArrayList<information>();
    Connection con=null;
    java.sql.Statement psts=null;
     ResultSet rs=null;
    try {
        con=db.getCon();
        String sql="select * from info where Date between '"+beginyear+"' and '"+endyear+"'";
        System.out.print(sql);
        psts=con.createStatement();
        rs=psts.executeQuery(sql);
        while(rs.next()){
            String id=rs.getString("Id");
            String date=rs.getString("Date");
             String province=rs.getString("Province");
             String city=rs.getString("City");
             String confirmed_num=rs.getString("Confirmed_num");
             String yisi_num=rs.getString("Yisi_num");
             String cured_num=rs.getString("Cured_num");
             String dead_num=rs.getString("Dead_num");
             
             information data=new information(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num);
             list.add(data);
            
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return list;
}
    public static void main(String[] args) {
        dao dataDao=new dao();
        List<information>list=dataDao.search1("2020-02-08 02:28:59","2020-02-08 02:28:59");
        int size=list.size();
        System.out.print(size);
        
    }
}

View Code

servlet:

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;


/**
 * Servlet implementation class searchServlet
 */
@WebServlet("/searchServlet")
public class searchServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public searchServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    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<information>list=new ArrayList<information>();
        dao dataDao=new dao();
        list=dataDao.search1(beginyearString, endyearString);
        if (list!=null) {
            System.out.print("查询成功");
            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);
    }
}

View Code

show.jsp:

<%@ page language="java" contentType="text/html; charse=tUTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.List"%>
    <%@page import="yiqing.information"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>信息显示页面</title>
</head>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript">
//     List<Data>list=request.getAttribute("list");
//     var names=new Array();
//     var chartData=new Array();
//     var length=list.length;
//     for(i=0;i<length;i++){
//         names.pust(list[i].city);
//         chartData.push(list[i].confirmed_num);
//     }
    </script>
    
</head>
<body>


<%    request.setCharacterEncoding("utf-8");
List <information> provinces =(List<information>) request.getAttribute("list"); 
int i=0;%>
<div align="center">
    <div id="main" align="center" style=" 750px;height:430px;" >
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                dataset: {
                    source: [
                        [  '省份','确诊人数'],
                        <%
                        //获取request域中的数据
                        if(provinces!=null){
                        for(information province:provinces){i++;
                    %>
                    ['<%=province.getProvince()%>','<%=province.getConfirmed_num()%>'],
                    <%
                        if(i>33)break;
                        }
                    
                        }
                    %>
                    ]
                },
                grid: {containLabel: true},
                xAxis: {
                    type: 'category',
                    axisLabel:{  
                        interval:0,//横轴信息全部显示  
                        rotate:40,//-30度角倾斜显示  
                         }
                    },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            x: '省份',
                            // 将 "product" 列映射到 Y 轴。
                            y: '确诊人数'
                        }
                    }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </div>
     
        
    </div> 
   
<table>
<tr>
    <td>省份</td>
    <td>确诊人数</td>
    <td>时间</td>
</tr>
<c:forEach items="${list }" var="list">
<tr>
  <td>${list.province }</td>
  <td>${list.confirmed_num }</td>
  <td>${list.date }</td>
</tr>
</c:forEach>
</table>
    
</body>
</html>

View Code

运行结果：

查看全文

相关阅读:
网页制作
 线性表
 学习进度表
 我是一只IT小小鸟读后感
 Git分支管理（一）
家庭因你而不同
 Mysql循环insert数据
 IDEA，右边栏不显示maven解决方案
 Linux定时清理日志脚本
 JAVA的夸平台特性的优势——工厂在线生产信息采集项目

原文地址：https://www.cnblogs.com/xjmm/p/12435674.html