全國疫情統計可視化地圖——階段一


課題要求:

 

 給出疫情相關數據表,進行完成。

項目思路:

1.先將sql數據文件導入到數據庫中

2.然后根據之前所學連接數據庫,獲取相關信息

3.可視化主要是在之前的基礎上學習了Echart圖表的使用,可以參考ECharts配置語法w3school在線教學相關資料。

項目結構:

 

date相關文件用於折線圖信息處理,bean用於圖標查詢的所有信息的處理。

相關源碼:

index.jsp:

<%@page import="com.servlet.beanServlet"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.ArrayList"%>
    <%@page import="com.bean.Bean"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>疫情統計情況</title>
<link rel="stylesheet" href="js/bootstrap.min.css">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<jsp:useBean id="b" class="com.servlet.beanServlet"></jsp:useBean>
<script type="text/javascript">
function onload() {
    <%List<Bean> yq = null;
    yq = b.findAll();%>
}
</script>
</head>


<body>
<!-- <div style="text-align: center;">
時間:<input type="text" name="Date" >
<a href="1.jsp">查詢</a>
</div> -->
<div id="main" style="width:1000px; height: 600px;"></div>

<div align="center">
        <h1 style="color:red">全國各省疫情信息</h1>
        <table >
            <tr>
                <td>日期</td>
                <td>省份</td>
                <td>城市</td>
                <td>確診人數</td>
                <td>疑似病例</td>
                <td>治愈人數</td>
                <td>死亡人數</td>
            </tr>
            <c:forEach items="<%=yq %>" var="item">
                <tr>
                    <td>${item.getDate()}</td>
                    <td>${item.getProvince()}</td>
                    <td>${item.getCity()}</td>
                    <td>${item.getConfirmed_num()}</td>
                    <td>${item.getYisi_num()}</td>
                    <td>${item.getCured_num()}</td>
                    <td>${item.getDead_num()}</td>
                </tr>
            </c:forEach>
        </table>
    </div>
</body>
<script type="text/javascript">

        // 基於准備好的dom,初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        myChart.setOption({
            title: { 
                text: '全國各省確診人數'
            },
            tooltip: {},
            legend: {
                data:['確診人數'],
                width:'auto',
                height:'auto'
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '確診人數',
                type: 'line',
                data: []
            }]
        });
        myChart.showLoading();
        var names=[];    //類別數組(實際用來盛放X軸坐標值)
        var nums=[];    //銷量數組(實際用來盛放Y坐標值)
        // 使用剛指定的配置項和數據顯示圖表。
        $.ajax({
        type : "post",
        async : true,            //異步請求(同步請求將會鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執行)
        url : "s",    //請求發送到TestServlet處
        success : function(resultJson) {
            var result= jQuery.parseJSON(resultJson);
            //請求成功時執行該函數內容,result即為服務器返回的json對象
            if (result) {
                for(var i=0;i<result.length;i++){
                      names.push(result[i].name);    //挨個取出類別並填入類別數組
                      nums.push(result[i].value);
                    }
                   myChart.hideLoading();    //隱藏加載動畫
                   myChart.setOption({        //加載數據圖表
                       xAxis: {
                           data: names
                       },
                       series: [{
                           // 根據名字對應到相應的系列
                           name: '確診人數',
                           data: nums
                       }]
                   });
                   
            }
       },
        error : function(errorMsg) {
            //請求失敗時執行該函數
        alert("圖表請求數據失敗!");
        myChart.hideLoading();
        }
   });
    </script>
</html>

運行截圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM