第三周课堂测试第二阶段笔记
这是要求，根据要求选择使用ECharts的map，然后对应的数据使用老师提供的数据库。
一、实体：
因为需要显示省份对应的患者人数、疑似人数（所给库中该列数值都为空，此处不添加了）、治愈人数、死亡人数，所以实体集的字段为---省份名、确诊人数、死亡人数、治愈人数。
package pojo; public class MapData { private String name; private String value; private String dead; private String cure; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } public String getDead() { return dead; } public void setDead(String dead) { this.dead = dead; } public String getCure() { return cure; } public void setCure(String cure) { this.cure = cure; } }
二、主页面：
<%@ 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> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" /> <script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script> <script src="${pageContext.request.contextPath }/js/echarts.min.js"></script> <script src="${pageContext.request.contextPath }/js/china.js"></script> <title>Insert title here</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 800px;;height:600px;"></div> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ title: { text: '全国地图', subtext: '该页面的数据仅供参考', }, tooltip: { formatter:function(params){ return params.name+'<br />'+'确诊人数：'+params['data']['value']+'<br />'+'死亡人数：' +params['data']['dead']+'<br />'+'治愈人数：'+params['data']['cure']; }//数据格式化 }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, visualMap: { min: 0, max: 40000, left: 'left', top: 'bottom', text: ['多','少'], inRange: { color: ['lightskyblue', 'yellow', 'orangered'] }, show:true }, series: [{ type: 'map', map: 'china', label:{ show: true }, nameMap:{ "南海诸岛" : "南海诸岛", '北京' :'北京市', '天津' :'天津市', '上海' :'上海市', '重庆' :'重庆市', '河北' :'河北省', '河南' :'河南省', '云南' :'云南省', '辽宁' :'辽宁省', '黑龙江' : '黑龙江省', '湖南' :'湖南省', '安徽' :'安徽省', '山东' :'山东省', '新疆' :'新疆维吾尔自治区', '江苏' :'江苏省', '浙江' :'浙江省', '江西' :'江西省', '湖北' :'湖北省', '广西' : '广西壮族自治区', '甘肃' :'甘肃省', '山西' :'山西省', '内蒙古' : "内蒙古自治区", '陕西' :'陕西省', '吉林' :'吉林省', '福建' :'福建省', '贵州' :'贵州省', '广东' :'广东省', '青海' :'青海省', '西藏' :'西藏自治区', '四川' :'四川省', '宁夏' :'宁夏回族自治区', '海南' :'海南省', '台湾' :'台湾', '香港' :'香港', '澳门' :'澳门' } } ] }); //异步加载数据 $.ajax({ type : "post", async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url : "${pageContext.request.contextPath }/getMapData", //请求发送到TestServlet处 success : function(resultJson) { var result= jQuery.parseJSON(resultJson); //请求成功时执行该函数内容，result即为服务器返回的json对象 if (result) { chart.setOption({ //加载数据图表 series: [{ data: result }] }); } }, error : function(errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); </script> </body> </html>
因为数据库中的省份名称跟echarts的china地图中的名称不对应，所以做了参数名的映射。
鼠标移到省份高亮显示echarts已经帮我们完成了，所以只需要完成显示信息即可。
tooltip: { formatter:function(params){ return params.name+'<br />'+'确诊人数：'+params['data']['value']+'<br />'+'死亡人数：' +params['data']['dead']+'<br />'+'治愈人数：'+params['data']['cure']; }//数据格式化 }
为信息的显示，我返回的数据格式是：
{name:'省份名',value:'确诊人数',dead:'死亡人数',cure:'治愈人数'}
在网上搜寻了数小时后终于找到了显示该格式的数据的方法：params['data']['要展示的数据字段名称']
于是数据展示部分也完成了
三、servlet
package web; import java.io.IOException; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import dao.InfoDao; import pojo.MapData; import pojo.MyInfo; import pojo.ProvinceInfo; /** * Servlet implementation class GetMapData */ @WebServlet("/getMapData") public class GetMapData extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=utf-8"); InfoDao dao = new InfoDao(); List<ProvinceInfo> infoList = null; try { infoList = dao.getAllInfo(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } List<MapData> myInfoList = new ArrayList<MapData>(); for (ProvinceInfo province : infoList) { MapData info = new MapData(); info.setName(province.getProvince()); info.setValue(province.getConfirmed_num()); info.setDead(province.getDead_num()); info.setCure(province.getCured_num()); myInfoList.add(info); } Gson gson = new Gson(); String json = gson.toJson(myInfoList); response.getWriter().write(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
此处没有什么难处，从数据库中查询数据，序列化后给网页。
四、效果：
根据左侧的工具条可以筛选出相应的省份（符合条件的高亮显示）：
