这是要求，根据要求选择使用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); } }
此处没有什么难处，从数据库中查询数据，序列化后给网页。
四、效果：
根据左侧的工具条可以筛选出相应的省份（符合条件的高亮显示）：