课题要求：
给出疫情相关数据表，进行完成。
项目思路：
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>
运行截图:
