疫情图表化查询
一:
实现功能: 从数据库读取疫情的数据信息,并将其用表格形式和柱状图表示出来:
1. 图形的表示使用了ECharts 如果想要自定义数据 我还调用的其中 的Dateset 属性
2.在编写程序的过程中,将读取的数据导入到Dateset 的source 内遇到了困难,在开始之时逍遥使用 <c:foreach> </c:foreach>
遍历来将数据导入,但是出现了问题,自己不能解决,最后切换思路,在jsp 中调用Java代码 ,调用request 获取信息,通过遍历来导入数据结局问题。
3.对于ECharts 的js 文件下载(搞了我好久的小问题):
在官网下载:
https://www.echartsjs.com/zh/index.html
当我 点击下载是,js文件直接被打开(就这里搞了好久,不知道怎么下载)。
点击右键,另存为就可以保存js 文件了,然后在根据相对路径进行引用(最好找到一个专门存放js 文件的文件夹,便于查找引用)
二:
运行示例:
三:
源码:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <%@page import="com.Bean.infos"%> 5 <%@page import="java.util.List"%> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="utf-8"> 10 <title>ECharts</title> 11 <!-- 引入 echarts.js --> 12 <script src="js/echarts.js"></script> 13 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 14 </head> 15 <body> 16 <% 17 request.setCharacterEncoding("utf-8"); 18 List <infos> list =(List<infos>) request.getAttribute("list"); 19 20 int i=0; 21 %> 22 23 24 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> 25 <div ></div> 26 <script type="text/javascript"> 27 // 基于准备好的dom,初始化echarts实例 28 var myChart = echarts.init(document.getElementById('main')); 29 30 var option = { 31 dataset: { 32 source: [ 33 [ '省份','确诊人数'], 34 <% 35 //获取request域中的数据 36 if(list!=null){ 37 for(infos info:list){i++; 38 %> 39 [<%=Integer.parseInt(info.getConfirmed_num())%>,'<%=info.getDate()%>'], 40 <% 41 //后边的省份重复 第33 42 if(i>33)break; 43 } 44 45 } 46 %> 47 ] 48 }, 49 grid: {containLabel: true}, 50 xAxis: {}, 51 yAxis: {type: 'category'}, 52 53 visualMap: { 54 orient: 'horizontal', 55 left: 'center', 56 min: 10, 57 max: 100, 58 text: ['严重地区感染人数', '轻度地区感染人数'], 59 // Map the score column to color 60 dimension: 0, 61 inRange: { 62 color: ['#D7DA8B', '#E15457'] 63 } 64 }, 65 66 67 68 69 70 71 72 series: [ 73 { 74 type: 'bar', 75 encode: { 76 // 将 "amount" 列映射到 X 轴。 77 x: '省份', 78 // 将 "product" 列映射到 Y 轴。 79 y: '确诊人数' 80 } 81 }] 82 }; 83 84 85 86 87 88 // 使用刚指定的配置项和数据显示图表。 89 myChart.setOption(option); 90 </script> 91 <div align="center"> 92 <table border="1" style="600px;height:40px;font-size: 20px" > 93 <tr> 94 <td>省份</td> 95 <td>城市</td> 96 <td>确诊人数</td> 97 <td>治愈人数</td> 98 <td>死亡人数</td> 99 </tr> 100 101 <% 102 if(list!=null){ 103 for(infos info:list){ 104 105 106 %> 107 <tr> 108 <td><%=info.getDate()%></td> 109 <td><%=info.getCity()%></td> 110 <td><%=info.getConfirmed_num()%></td> 111 <td><%=info.getCure()%></td> 112 <td><%=info.getDead()%></td> 113 </tr> 114 <% 115 } 116 } 117 %> 118 </table> 119 </div> 120 121 </body> 122 </html>
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="UTF-8"> 7 <title>全国疫情查询</title> 8 </head> 9 <body> 10 11 <div align="center"> 12 <section> 13 <form action="MainServlet?method=search" method="post" onsubmit="return check()"> 14 <span ><font size="5" color="black"> 查询日期:</font></span> 15 <input style="200px;height: 30px;font-size: 20px" type="text" name="name" > 16 <br/> 17 18 <!-- <span ><font size="5" color="black">开始日期:</font></span> --> 19 <!-- <input style="200px;height: 30px;font-size: 20px" type="text" name="cost" >> --> 20 <!-- <br/> --> 21 22 23 24 <!-- <span ><font size="5" color="black">结束日期:</font></span> --> 25 <!-- <input style="200px;height: 30px;font-size: 20px" type="text" name="place" > > --> 26 <!-- <br/> --> 27 28 29 <!-- <span ><font size="5" color="black">消费时间:</font></span> --> 30 <%-- <input style="200px;height: 30px;font-size: 20px" type="date" name="time" >> --%> 31 <!-- <br/> --> 32 33 <input style="50px;height: 40px;font-size: 15px" type="submit" value="查询" onclick="return on_click()"> 34 <br/> 35 </form> 36 </section> 37 </div> 38 39 40 41 </body> 42 </html>