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

時間 2020-06-09

標籤全國疫情統計可視化地圖階段简体版

原文原文鏈接

課題要求：javascript

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

項目思路：html

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

2.而後根據以前所學鏈接數據庫，獲取相關信息jquery

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

項目結構：sql

date相關文件用於折線圖信息處理，bean用於圖標查詢的全部信息的處理。數據庫

相關源碼：json

index.jsp:bootstrap

<%@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>