課題要求：
給出疫情相關數據表，進行完成。
項目思路：
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>
運行截圖:
