第三周----javaweb实现调用数据库生成简单的柱形图和地图
实现的方法主要是利用echarts
官网：https://www.echartsjs.com/zh/index.html
后端方面主要是利用dao层的find函数实现输入时间区间从而找到数据
因为数据库时间类型为datatime，所以在写sql语句的时候可以通过大于号和小于号来实现
String sql = "select * from info where Date>'"+start+"' and Date<'"+end+"' and Province = '"+province+"'";
然后就是jsp页面，这个jsp主要是实现柱状图
官网柱状图实例：https://www.echartsjs.com/examples/zh/editor.html?c=bar-simple
可以通过注释来看下这个jsp是如何调用dao中find函数生成的list
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" > <title>查询结果</title> </head> <!-- ECharts单文件引入 --> <script type="text/javascript" defer="defer" src="<%=request.getContextPath() %>/My97DatePicker/WdatePicker.js"></script> <script src="echarts.min.js" ></script> </head> <body> <table> <tr> <td> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 500px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var city1=[]; <c:forEach items="${list}" var="a"> city1.push("${a.city}"); </c:forEach> //这里开一个数组村数据库查到的city var num1=[]; <c:forEach items="${list}" var="b"> num1.push("${b.confirmed}"); </c:forEach> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { title : { text: '疫情确诊人数数据', subtext: '城市和人数' }, tooltip : { trigger: 'axis' }, legend: { data:['市','人数'] }, toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : city1, axisLabel:{ interval:0, rotate:30, } } ], yAxis : [ { type : 'value' } ], series : [ { name:'确诊人数', type:'bar', data:num1}] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);//这里就用option更新 </script> </td> </tr> </table> <div align="center"> <table class="tb"> <tr> <td style="width: 200px;">时间</td> <td style="width: 200px;">省</td> <td style="width: 200px;">城市</td> <td style="width: 200px;">确诊人数</td> </tr> <!-- forEach遍历出adminBeans --> <c:forEach items="${list}" var="item" varStatus="status"> <tr> <td style="width: 200px;">${item.start}</td> <td style="width: 200px;">${item.end}</td> <td style="width: 200px;">${item.city}</td> <td style="width: 200px;">${item.confirmed}</td> </tr> </c:forEach> </table> </div> </body> </html>
然后是地图的绘制：我的nameMap是因为数据库中名字和实际名字不匹配
官方地图实例：https://www.echartsjs.com/examples/zh/editor.html?c=map-usa
可以结合jsp看看地图的具体绘制
地图绘制的时候将list转换成了json并且利用了ajax函数，这个代码也是参考了同学的，我生成地图的时候遇到了dao层传不了list的情况
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@page import="com.fin.bean.yq" %> <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script src="js/echarts.min.js"></script> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/china.js"></script> <title>显示</title> <style> *{margin:0;padding:0} html,body{ width:100%; height:100%; } #main{ width:600px; height:450px; margin: 150px auto; border:1px solid #ddd; } /*默认长宽比0.75*/ </style> </head> <body > <br> <h1>疫情统计表</h1> <br> <br> <br> <div> <span> 日期<input class="slide-up " type="date" id="time" name="time" > <button class="clearfix" style="display:inline-block;float: centre;width:100px;height:40px" type="button" onclick="checkfind()">查询</button> </span><br><br> </div> <div id="main"> </div> <script type="text/javascript"> function randomValue() { return Math.round(Math.random()*1000); } var dt; var data = new Array(0); function checkfind() { var time=document.getElementById("time").value; if(time=="") { alert("请输入时间！"); return ; } else{ time = $("#time").val(); $.ajax({ url : "CourseServlet", async : true, type : "POST", data : { "time" : time }, dataType : "json", success : function(json) { for (var i = 0; i < json.length; i++) { var d = {}; d["name"] = json[i].Province; d["value"] = json[i].Confirmed; d["yisi"] = json[i].Yisi; d["cured"] = json[i].Cured; d["dead"] = json[i].Dead; data.push(d); } var myChart = echarts.init(document.getElementById('main')); function randomValue() { return Math.round(Math.random()*1000); } var optionMap = { backgroundColor : '#FFFFFF', title : { text : '全国疫情', subtext : '', x : 'center' }, tooltip : { formatter : function(params) { return params.name + '<br/>' + '确诊人数 : ' + params.value + '<br/>' + '死亡人数 : ' + params['data'].dead + '<br/>' + '治愈人数 : ' + params['data'].cured + '<br/>'+ '疑似患者人数 : ' + params['data'].yisi; } }, //左侧小导航图标 visualMap: { min: 0, max: 35000, left: 'left', top: 'bottom', text: ['高','低'],//取值范围的文字 inRange: { color: ['#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']//取值范围的颜色 }, show:true//图注 }, //配置属性 series : [ { type : 'map', mapType : 'china', label : { show : true }, data : data, nameMap : { '南海诸岛' : '南海诸岛', '北京' : '北京市', '天津' : '天津市', '上海' : '上海市', '重庆' : '重庆市', '河北' : '河北省', '河南' : '河南省', '云南' : '云南省', '辽宁' : '辽宁省', '黑龙江' : '黑龙江省', '湖南' : '湖南省', '安徽' : '安徽省', '山东' : '山东省', '新疆' : '新疆维吾尔自治区', '江苏' : '江苏省', '浙江' : '浙江省', '江西' : '江西省', '湖北' : '湖北省', '广西' : '广西壮族自治区', '甘肃' : '甘肃省', '山西' : '山西省', '内蒙古' : "内蒙古自治区", '陕西' : '陕西省', '吉林' : '吉林省', '福建' : '福建省', '贵州' : '贵州省', '广东' : '广东省', '青海' : '青海省', '西藏' : '西藏自治区', '四川' : '四川省', '宁夏' : '宁夏回族自治区', '海南' : '海南省', '台湾' : '台湾', '香港' : '香港', '澳门' : '澳门' } } ] }; //使用制定的配置项和数据显示图表 myChart.setOption(optionMap); myChart.on('click', function (params) { var url = "HeibeiData.jsp?province="+params.name+"&time="+time; window.location.href =url; }); alert("成功！"); }, error : function() { alert("失败"); }, }); } } /* setTimeout(function () { myChart.setOption({ series : [ { name: '信息量', type: 'map', geoIndex: 0, data:dataList } ] }); },1000)*/ </script> </body> </html>
