目标：
这周我们学习了百度图表Echars的使用，第一阶段利用数据库数据生成统计图，第二三阶段利用数据生成全国确诊人数分布图。主要实现方法如下：
1.连接数据库，读取数据返回一个List，servlet调用这个函数，以json格式传回给前端页面。
2.前端页面接收数据
第一阶段代码：
Dao：
public class DataDao {// public List<Data> search(String beginyear, String endyear) throws SQLException {// QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());// String sql = "select * from info where date >= ? and date <= ?";// return runner.query(sql, new BeanListHandler<Data>(Data.class),beginyear,endyear);// }//}
public List<Data> search1(String beginyear,String endyear){
int num=0;
List<Data>list=new ArrayList<Data>();
Connection con=null;
java.sql.Statement psts=null;
ResultSet rs=null;
try {
con=DataDB.getCon();
String sql="select * from info where Date between '"+beginyear+"' and '"+endyear+"'";
System.out.print(sql);
psts=con.createStatement();
rs=psts.executeQuery(sql);
while(rs.next()){
String id=rs.getString("Id");
String date=rs.getString("Date");
String province=rs.getString("Province");
String city=rs.getString("City");
String confirmed_num=rs.getString("Confirmed_num");
String yisi_num=rs.getString("Yisi_num");
String cured_num=rs.getString("Cured_num");
String dead_num=rs.getString("Dead_num");
Data data=new Data(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num);
list.add(data);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
servlet：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String beginyearString=request.getParameter("beginyear");
String endyearString=request.getParameter("endyear");
List<Data>list=new ArrayList<Data>();
DataDao dataDao=new DataDao();
list=dataDao.search1(beginyearString, endyearString);
if (list!=null) {
System.out.print("查询成功");
request.setAttribute("list", list);
request.getRequestDispatcher("show.jsp").forward(request, response);
}
}
show.jsp（需要一个search页面按照前后两个时间搜索，在这里不展出)
<%@ page language="java" contentType="text/html; charse=tUTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="echart.Data"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE html><html><head><meta charset="UTF-8"><title>信息显示页面</title></head>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> //在这里引入echars.js的地址，这里写的是网络地址，也可以下载后写入此文件在整个工程中的地址
<script type="text/javascript">
</script>
</head><body>
<% request.setCharacterEncoding("utf-8");
List <Data> provinces =(List<Data>) request.getAttribute("list"); //接收后台传过来的数据集合int i=0;%><div align="center">
<div id="main" align="center" style="width: 750px;height:430px;" >//首先为统计图规定一个容器
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
dataset: {
source: [
[ '省份','确诊人数'],
<%
//获取request域中的数据
if(provinces!=null){
for(Data province:provinces){i++;
%>
['<%=province.getProvince()%>','<%=province.getConfirmed_num()%>'],//将list中的数据拼接成json格式作为要显示在统计图中的数据
<%
if(i>33)break;
}
}
%>
]
},
grid: {containLabel: true},
xAxis: {type: 'category'},
yAxis: {},
series: [
{
type: 'bar',//此处决定了统计图类型，bar：柱状图，line：折线图
encode: {
// 将 "amount" 列映射到 X 轴。 x: '省份',
// 将 "product" 列映射到 Y 轴。 y: '确诊人数'
}
}]
};
// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
</script>
</div>
</div>
<table><tr>
<td>省份</td>
<td>确诊人数</td>
<td>时间</td></tr><c:forEach items="${list }" var="list"><tr>
<td>${list.province }</td>
<td>${list.confirmed_num }</td>
<td>${list.date }</td></tr></c:forEach></table>
</body></html>
第二阶段代码：
Dao：
public static List search2(String data) {
int num=0;
List<Data>list=new ArrayList<Data>();
Connection con=null;
java.sql.Statement psts=null;
ResultSet rs=null;
try {
con=DataDB.getCon();
String sql="select * from info1 where Date ='"+data+"'";
System.out.print(sql);
psts=con.createStatement();
rs=psts.executeQuery(sql);
while(rs.next()){
String id=rs.getString("Id");
String date=rs.getString("Date");
String province=rs.getString("Province");
String city=rs.getString("City");
String confirmed_num=rs.getString("Confirmed_num");
String yisi_num=rs.getString("Yisi_num");
String cured_num=rs.getString("Cured_num");
String dead_num=rs.getString("Dead_num");
Data data1=new Data(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num);
list.add(data1);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
servlet：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String dataString=request.getParameter("time");
List<Data>list=new ArrayList<Data>();
DataDao dataDao=new DataDao();
list=dataDao.search2(dataString);
if(list!=null) {
Gson gson = new Gson();
String json = gson.toJson(list);
System.out.println(json);
response.getWriter().write(json);//阶段一是将list传回给前台，在前台进行拼接，阶段二直接将json格式的数据传回给前台
}
}
map.<!DOCTYPE html><html style="height: 100%">
<head><meta charset="UTF-8"><base><title>地图阶段二</title><script src="js/jquery-1.12.3.min.js" type="text/javascript"></script><script type="text/javascript" src="js/echarts.js"></script><script type="text/javascript" src="js/china.js"></script></head><body style="height: 100%; margin: 0">
<div class="row" style=" height: 50px">
日期 <input type="text" name="time"
id="time" placeholder="yyyy-MM-dd hh:mm:ss"> <input
type="button" value="查询" onclick="tu()">//为查询按钮绑定了一个函数，实现了利用ajax异步读取交换数据
</div>
<div id="main" style="height: 100%"></div></body><script type="text/javascript">
function randomData() {
return Math.round(Math.random() * 500);
}
var dt;
var mydata1 = new Array(0);
function tu() {
time = $("#time").val();
//alert(time.substring(0, 2)); $.ajax({
url : "InfoServlet",//要传送的servlet地址，此处即为传给InfoServlet
async : true,
type : "POST",
data : {
"time" : time//要穿送的数据，为jason格式
},
success : function(data) {//执行成功的回调函数，此处即为显示地图
dt = data;
for (var i = 0; i < 33; i++) {
var d = {
};
d["name"] = dt[i].province;//.substring(0, 2); d["value"] = dt[i].confirmed_num;
d["yisi_num"] = dt[i].yisi_num;
d["cured_num"] = dt[i].cured_num;
d["dead_num"] = dt[i].dead_num;
mydata1.push(d);
}//接收后台的数据
//var mdata = JSON.stringify(mydata1);
var optionMap = {
backgroundColor : '#FFFFFF',
title : {
text : '全国地图大数据',
subtext : '',
x : 'center'
},
//echart提示框内容：
tooltip : {
formatter : function(params) {
return params.name + '<br/>' + '确诊人数 : '
+ params.value + '<br/>' + '死亡人数 : '
+ params['data'].dead_num + '<br/>' + '治愈人数 : '
+ params['data'].cured_num + '<br/>'+ '疑似患者人数 : '
+ params['data'].yisi_num;
}//数据格式化 },
//左侧小导航图标 visualMap : {
min : 0,
max : 35000,
text : [ '多', '少' ],
realtime : false,
calculable : true,
inRange : {
color : [ 'lightskyblue', 'yellow', 'orangered' ]
}
},
//配置属性 series : [ {
type : 'map',
mapType : 'china',
label : {
show : true
},
data : mydata1,
nameMap : {
'南海诸岛' : '南海诸岛',
'北京' : '北京市',
'天津' : '天津市',
'上海' : '上海市',
'重庆' : '重庆市',
'河北' : '河北省',
'河南' : '河南省',
'云南' : '云南省',
'辽宁' : '辽宁省',
'黑龙江' : '黑龙江省',
'湖南' : '湖南省',
'安徽' : '安徽省',
'山东' : '山东省',
'新疆' : '新疆维吾尔自治区',
'江苏' : '江苏省',
'浙江' : '浙江省',
'江西' : '江西省',
'湖北' : '湖北省',
'广西' : '广西壮族自治区',
'甘肃' : '甘肃省',
'山西' : '山西省',
'内蒙古' : "内蒙古自治区",
'陕西' : '陕西省',
'吉林' : '吉林省',
'福建' : '福建省',
'贵州' : '贵州省',
'广东' : '广东省',
'青海' : '青海省',
'西藏' : '西藏自治区',
'四川' : '四川省',
'宁夏' : '宁夏回族自治区',
'海南' : '海南省',
'台湾' : '台湾',
'香港' : '香港',
'澳门' : '澳门'
}
} ]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//使用制定的配置项和数据显示图表 myChart.setOption(optionMap);
},
error : function() {
alert("请求失败");
},
dataType : "json"
});
}</script></html>
阶段三代码：
根据题目要求，点击全国省级地图后，要能进行市级地图展示并能够显示市级确诊人数。
实现过程，在阶段二的前端代码中为地图添加点击的监听函数，能够实现点击后利用servlet向下一个页面跳转
跳转后加载市级地图，然后利用ajax实现提示框市级信息的展示。
Dao：
public static List search3(String data,String province) {
int num=0;
List<Data>list=new ArrayList<Data>();
Connection con=null;
java.sql.Statement psts=null;
ResultSet rs=null;
try {
con=DataDB.getCon();
String sql="select * from info1 where Date ='"+data+"' and Province ='"+province+"'";
System.out.print(sql);
psts=con.createStatement();
rs=psts.executeQuery(sql);
while(rs.next()){
String id=rs.getString("Id");
String date=rs.getString("Date");
String city=rs.getString("City");
String confirmed_num=rs.getString("Confirmed_num");
String yisi_num=rs.getString("Yisi_num");
String cured_num=rs.getString("Cured_num");
String dead_num=rs.getString("Dead_num");
Data city2=new Data(id,date,province,city,confirmed_num,yisi_num,cured_num,dead_num);
list.add(city2);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
servlet1：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String time=request.getParameter("time");
String provinceString=request.getParameter("province");
request.setAttribute("province", provinceString);
System.out.print("成功");
request.getRequestDispatcher("littlemap.jsp").forward(request, response);
}
servlet2：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String dataString="2020-02-12 10:14:15";
String province = request.getParameter("province");
List<Data>list=new ArrayList<Data>();
List<Data>listcityCities=new ArrayList<Data>();
DataDao dataDao=new DataDao();
list=dataDao.search3(dataString,province);
for(int i=0;i<list.size();i++) {
Data data=new Data();
data.setCity(list.get(i).getCity());
data.setConfirmed_num(list.get(i).getConfirmed_num());
listcityCities.add(data);
}
Gson gson = new Gson();
String json = gson.toJson(listcityCities);
System.out.println(json);
response.getWriter().write(json);
System.out.println();
}
map1.html
<!DOCTYPE html><html style="height: 100%">
<head><meta charset="UTF-8"><base><title>地图阶段二</title><script src="js/jquery-1.12.3.min.js" type="text/javascript"></script><script type="text/javascript" src="js/echarts.js"></script><script type="text/javascript" src="js/china.js"></script></head><body style="height: 100%; margin: 0">
<div class="row" style=" height: 50px">
日期 <input type="text" name="time"
id="time" placeholder="yyyy-MM-dd hh:mm:ss"> <input
type="button" value="查询" onclick="tu()">
</div>
<div id="main" style="height: 100%"></div></body><script type="text/javascript">
function randomData() {
return Math.round(Math.random() * 500);
}
var dt;
var mydata1 = new Array(0);
function tu() {
time = $("#time").val();
//alert(time.substring(0, 2)); $.ajax({
url : "InfoServlet",
async : true,
type : "POST",
data : {
"time" : time
},
success : function(data) {
dt = data;
for (var i = 0; i < 33; i++) {
var d = {
};
d["name"] = dt[i].province;//.substring(0, 2); d["value"] = dt[i].confirmed_num;
d["yisi_num"] = dt[i].yisi_num;
d["cured_num"] = dt[i].cured_num;
d["dead_num"] = dt[i].dead_num;
mydata1.push(d);
}
//var mdata = JSON.stringify(mydata1);
var optionMap = {
backgroundColor : '#FFFFFF',
title : {
text : '全国地图大数据',
subtext : '',
x : 'center'
},
tooltip : {
formatter : function(params) {
return params.name + '<br/>' + '确诊人数 : '
+ params.value + '<br/>' + '死亡人数 : '
+ params['data'].dead_num + '<br/>' + '治愈人数 : '
+ params['data'].cured_num + '<br/>'+ '疑似患者人数 : '
+ params['data'].yisi_num;
}//数据格式化 },
//左侧小导航图标 visualMap : {
min : 0,
max : 35000,
text : [ '多', '少' ],
realtime : false,
calculable : true,
inRange : {
color : [ 'lightskyblue', 'yellow', 'orangered' ]
}
},
//配置属性 series : [ {
type : 'map',
mapType : 'china',
label : {
show : true
},
data : mydata1,
nameMap : {
'南海诸岛' : '南海诸岛',
'北京' : '北京市',
'天津' : '天津市',
'上海' : '上海市',
'重庆' : '重庆市',
'河北' : '河北省',
'河南' : '河南省',
'云南' : '云南省',
'辽宁' : '辽宁省',
'黑龙江' : '黑龙江省',
'湖南' : '湖南省',
'安徽' : '安徽省',
'山东' : '山东省',
'新疆' : '新疆维吾尔自治区',
'江苏' : '江苏省',
'浙江' : '浙江省',
'江西' : '江西省',
'湖北' : '湖北省',
'广西' : '广西壮族自治区',
'甘肃' : '甘肃省',
'山西' : '山西省',
'内蒙古' : "内蒙古自治区",
'陕西' : '陕西省',
'吉林' : '吉林省',
'福建' : '福建省',
'贵州' : '贵州省',
'广东' : '广东省',
'青海' : '青海省',
'西藏' : '西藏自治区',
'四川' : '四川省',
'宁夏' : '宁夏回族自治区',
'海南' : '海南省',
'台湾' : '台湾',
'香港' : '香港',
'澳门' : '澳门'
}
} ]
}；
});
//使用制定的配置项和数据显示图表 myChart.setOption(optionMap);
},
error : function() {
alert("请求失败");
},
dataType : "json"
});
}</script></html>
littlemap.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="js/jquery-1.12.3.min.js" type="text/javascript"></script><script type="text/javascript" src="js/echarts.js"></script><script type="text/javascript" src="js/china.js"></script></head><body>
var myChart = echarts.init(document.getElementById('main'));//myChart.showLoading();var province = "${province}";//var list = "${list}";
$.get("mapjson/"+ province +".json", function (geoJson) {
myChart.hideLoading();
echarts.registerMap(province, geoJson);
myChart.setOption(option = {
title: {
text: province + '地区疫情情况',
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c}人确诊'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 0,
max: 50000,
text: ['High', 'Low'],
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
}
]
});
});
$.ajax({
url:"servlet2",
async:true,
type:"POST",
data:{"province":province},
success:function(data){
alert(data.length);
alert(data.city);
var mydata1 = new Array(0);
for(var i=0;i<data.length;i++){
var c = {};
c["name"] = data[i].city+'市';
c["value"] = data[i].confirmed_num;
mydata1.push(c);
}
alert(mydata1.size);
myChart.setOption({ //加载数据图表 series: [{
data: mydata1
}]
});
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
</script></body></html>
