周总结3

这周主要进行了全国疫情数据数据的爬取以及可视化

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;

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 dao.Function;


@WebServlet("/GetdataServlet")
public class GetdataServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

   
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");      
        response.setContentType("utf-8");         
        response.setCharacterEncoding("utf-8");        
        String time1=request.getParameter("time1");
        String time2=request.getParameter("time2");
        System.out.println(time1+"--->"+time2);
        String json=null;
        try {
             json=Function.getData(time1, time2);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        System.out.println(json);
        PrintWriter out=response.getWriter();
        out.println(json);
        out.close();
    }

    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");     
        response.setContentType("utf-8");        
        response.setCharacterEncoding("utf-8");        
        String time1=request.getParameter("time1");
        String time2=request.getParameter("time2");
        System.out.println(time1+"--->"+time2);
        String json=null;
        try {
             json=Function.query(time1, time2);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        System.out.println(json);
        PrintWriter out=response.getWriter();
        out.println(json);
        out.close();
    }

}

View Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全国疫情统计</title>
<style type="text/css">
#btn {
    /* 按钮美化 */
    margin-top: 5px;
     75px; /* 宽度 */
    height: 23px; /* 高度 */
    border- 0px; /* 边框宽度 */
    border-radius: 3px; /* 边框半径 */
    background: #1E90FF; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: Microsoft YaHei; /* 设置字体 */
    color: white; /* 字体颜色 */
    font-size: 14px; /* 字体大小 */
}

#btn:hover {
    background: orange;
}
table td,th{
         padding: 20px;
        text-align: center;
        border:1px solid #70aefb ;
        vertical-align:middle;
    }
</style>
<script src="echarts.js"></script>
<script src="jquery-3.4.1.js"></script>

<script>
    $(function(){
            
        $("#btn").click(function(){
            
            $.post("GetdataServlet",{time1:$("#time1").val(),time2:$("#time2").val()},function(result){
                    if(result!=null){
                        var array=JSON.parse(result);
                        console.log(result);
                        console.log(array);
                        var province=[];
                        var count=[];
                        for(var i=0;i<array.length;i++){
                            province.push(array[i].province);
                            count.push(array[i].count);
                        }
                        var myChart = echarts.init(document.getElementById('main'));
                        myChart.hideLoading();
                            myChart.setOption({
                             title: {
                                  text: '疫情统计'
                              },
                                legend: {
                                        data:['确诊人数']
                                   },
                            xAxis: {
                                data: province,
                                axisLabel: {interval:0,rotate:40 }
                            },
                            
                            yAxis: {
                                
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                  name: '确诊人数',
                                data:count

                            }]
                            
                        });
                            
                            $.get("GetdataServlet?time1="+$("#time1").val()+"&time2="+$("#time2").val(),function(result){
                                if(result!=null){
                                    
                                    var json=JSON.parse(result);
                                    for(var j=0;j<json.length;j++){
                                        html+="<tr><td>"+json[j].id+"</td><td>"+json[j].date+"</td><td>"+json[j].province+"</td><td>"+json[j].city+"</td><td>"+json[j].confirmed_num+"</td><td>"+json[j].Cured_num+"</td><td>"+json[j].Dead_num+"</td></tr>"
                                    }

                                    console.log(json);
                                    $("#table").html(html+"</table>");
                                }else{
                                    
                                }
                            });
                    
                            
                            
                    }else{
                        alert("暂无该数据统计情况");
                    }
            });        
            
            
    
            
        
        });
    });
</script>
</head>
<body>
    <input type="text" id="time1" name="time1" />
    <span>--------></span>
    <input type="text" id="time2" name="time2" />
    <input type="button" value="查询" id="btn">
    <div id="main" style=" 1200px; height: 500px;"></div>
    <div id="table"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title : {
                text : '疫情统计柱形图'
            },
            tooltip : {},
            legend : {
                data : [ '确诊人数' ]
            },
            xAxis : {
                data : []
            },
            yAxis : {},
            series : [ {
                name : '确诊人数',
                type : 'bar',
                data : []
            } ]
        });
    </script>
</body>
</html>

View Code