首先要导入对应的包。下钻用到各个省份的json文件等内容导入之后进行相关的操作。
首先是从数据库中读取相应的数据文件。通过list方式。只有在ser出转化为json文件。在jsp页面通过ajax来进行数据的获取。返回json对象。
获取数据库中的信息保存到list对象集合之中简单如下：
public static ArrayList<heibeicity> findDate(String Date) { // TODO Auto-generated method stub String sql = "select * from hebei_city_info where Date =\'" +Date+ "\'"; ArrayList<heibeicity> list =new ArrayList<heibeicity>(); Connection con=null; PreparedStatement psts=null; ResultSet rs=null; try { con=DBUtil.getConn(); psts=con.prepareStatement(sql); rs=psts.executeQuery();//记录返回的结果 while(rs.next()) { heibeicity user1=new heibeicity(); user1.setCity(rs.getString("City")); user1.setNew_confirmed_num(rs.getString("new_confirmed_num")); user1.setConfirmed_num(rs.getString("confirmed_num")); user1.setDead_num(rs.getString("dead_num")); user1.setZhong_num(rs.getString("zhong_num")); user1.setCured_num(rs.getString("cured_num")); user1.setDate(rs.getString("date")); list.add(user1); } DBUtil.close(rs, psts, con); return list; } catch (SQLException e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } return list; }
之后将这个list转换成json类型返回ajax：
response.setContentType("text/plain; charset=UTF-8"); userdao userdao=new userdao(); ArrayList<info1> info_list=userdao.findpro(); HttpSession session = request.getSession(); session.setAttribute("info_list",info_list); Gson gson = new Gson(); String json = gson.toJson(info_list); response.getWriter().write(json);
之后就是生成整个地图进行显示各个省份的内容：
代码中的主要部分如下：
for(var i=0;i<32;i++){ var d = { }; d["name"] = data[i].Province;//.substring(0, 2); d["value"] = data[i].Confirmed_num; d["Yisi_num"] = data[i].Yisi_num; d["Cured_num"] = data[i].Cured_num; d["Dead_num"] = data[i].Dead_num; mydata.push(d); }
tooltip : { trigger: \'item\', formatter : function(params) { return params.name + \'<br/>\' + \'确诊人数 : \' + params.value + \'<br/>\' + \'死亡人数 : \' + params[\'data\'].Dead_num + \'<br/>\' + \'治愈人数 : \' + params[\'data\'].Cured_num + \'<br/>\'+ \'疑似患者人数 : \' + params[\'data\'].Yisi_num; }//数据格式化 },
第一个一定要有name\value的复制，name帮助判断是哪个省市。之后value来进行判断省份的颜色。，第一个中的例如
a={}相当于 a = new Object();
下边的tooltip是显示提示信息的；
主要的代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@page import="com.yiqing.users.*"%> <%@page import="java.util.ArrayList"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> #myEcharts { width: 800px; height: 500px; border: solid 1px red; margin: 0 auto; } </style> <!-- 引入 echarts.js --> <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script> <!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据--> <script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script> <meta charset="utf-8"> <title>中国疫情图</title> <!-- 引入 echarts.js --> <script src="${pageContext.request.contextPath}/resource/echarts.js"></script> </head> <body> <!--为echarts准备一个dom容器--> <div id="myEcharts"></div> <script> window.onload=function(){ $.ajax({//()里面是JSON数据，外层要加上{}。 url:"lianxi2",//处理页面地址，表示ajax要用哪个页面处理 data:{code:"n001"},//传递到处理页面的值，也是JSON数据，要用{}。如果传2个值就在{}里面加逗号，再写另外1个值。 type:"POST",//传值方式，一般用POST方式，注意POST要大写。 dataType:"JSON",//返回值的类型。1.TEXT文本，字符串。2.JSON数据 3.XML可扩展标记语言，主要用在数据传递。 async:true, success:function(data){//表示处理成功之后做什么,后面跟一个匿名函数。回调函数，表示处理页面处理完数据以后执行这个函数。data表示处理页面返回的值，用形参接收。 var mydata = new Array(0); alert(data[0].Province+data[0].Cured_num); for(var i=0;i<32;i++){ var d = { }; d["name"] = data[i].Province;//.substring(0, 2); d["value"] = data[i].Confirmed_num; d["Yisi_num"] = data[i].Yisi_num; d["Cured_num"] = data[i].Cured_num; d["Dead_num"] = data[i].Dead_num; mydata.push(d); } //初始化echarts实例 var myChart = echarts.init(document.getElementById(\'myEcharts\')); // 指定图表的配置项和数据 var option = { tooltip : { trigger: \'item\', formatter : function(params) { return params.name + \'<br/>\' + \'确诊人数 : \' + params.value + \'<br/>\' + \'死亡人数 : \' + params[\'data\'].Dead_num + \'<br/>\' + \'治愈人数 : \' + params[\'data\'].Cured_num + \'<br/>\'+ \'疑似患者人数 : \' + params[\'data\'].Yisi_num; }//数据格式化 }, title: { text: \'中国疫情图\', left: \'center\' }, legend: { orient: \'vertical\', left: \'left\', data: [\'中国疫情图\'] }, visualMap: { type: \'piecewise\', pieces: [ { min: 1000, max: 1000000, label: \'大于等于1000人\', color: \'#372a28\' }, { min: 500, max: 999, label: \'确诊500-999人\', color: \'#4e160f\' }, { min: 150, max: 499, label: \'确诊150-499人\', color: \'#974236\' }, { min: 50, max: 149, label: \'确诊50-149人\', color: \'#ee7263\' }, { min: 1, max: 49, label: \'确诊1-49人\', color: \'#f5bba7\' }, ], color: [\'#E0022B\', \'#E09107\', \'#A3E00B\'] }, toolbox: { show: true, orient: \'vertical\', left: \'right\', top: \'center\', feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, roamController: { show: true, left: \'right\', mapTypeControl: { \'china\': true } }, series: [ { name: \'确诊数\', type: \'map\', mapType: \'china\', nameMap : { \'南海诸岛\' : \'南海诸岛\', \'北京\' : \'北京市\', \'天津\' : \'天津市\', \'上海\' : \'上海市\', \'重庆\' : \'重庆市\', \'河北\' : \'河北省\', \'河南\' : \'河南省\', \'云南\' : \'云南省\', \'辽宁\' : \'辽宁省\', \'黑龙江\' : \'黑龙江省\', \'湖南\' : \'湖南省\', \'安徽\' : \'安徽省\', \'山东\' : \'山东省\', \'新疆\' : \'新疆维吾尔自治区\', \'江苏\' : \'江苏省\', \'浙江\' : \'浙江省\', \'江西\' : \'江西省\', \'湖北\' : \'湖北省\', \'广西\' : \'广西壮族自治区\', \'甘肃\' : \'甘肃省\', \'山西\' : \'山西省\', \'内蒙古\' : "内蒙古自治区", \'陕西\' : \'陕西省\', \'吉林\' : \'吉林省\', \'福建\' : \'福建省\', \'贵州\' : \'贵州省\', \'广东\' : \'广东省\', \'青海\' : \'青海省\', \'西藏\' : \'西藏自治区\', \'四川\' : \'四川省\', \'宁夏\' : \'宁夏回族自治区\', \'海南\' : \'海南省\', \'台湾\' : \'台湾\', \'香港\' : \'香港\', \'澳门\' : \'澳门\' }, roam: false, label: { show: true, color: \'rgb(249, 249, 249)\' }, data: mydata } ] }; //使用指定的配置项和数据显示图表 myChart.setOption(option); myChart.on(\'click\', function (params) { alert(params.name); var url = "lianxi3?city_name="+ params.name; window.location.href =url; }); }, error:function(){//处理页面出错以后执行的函数。 } }); } </script> </body> </html>
之后就是对下钻的操作了。添加province的对应的json文件。之后代码如下：
<%@ 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 href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min(1).js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/china.js"></script> <script src="${pageContext.request.contextPath }/js/china.js"></script> <script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script> <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script> <title>Insert title here</title> </head> <body> <div id="ditu2" style="width: 700px;height: 700px;margin: 0 auto;"></div> </body> <script type="text/javascript"> $.ajax({ url:"lianxi33", async:true, type:"POST", dataType:"json", data:{"City":"${city_name}", }, success:function(data){ alert(data[1].City+data[1].Dead_num); alert(data.length); var mydata2= new Array(0); for(var i=1;i<data.length;i++){ var d2 = {}; d2["name"] = data[i].City+\'市\'; d2["value"] = data[i].Confirmed_num; d2["Dead_num"] = data[i].Dead_num; mydata2.push(d2); } var chart = echarts.init(document.getElementById("ditu2")); $.getJSON(\'json/province/${city_name}.json\', function(data) { echarts.registerMap(\'${city_name}\', data); chart.setOption(option = { tooltip: { trigger: \'item\', formatter: function(params) { return params.name + \'<br/>\' + \'确诊人数 : \' + params.value + \'<br/>\' + \'死亡人数 : \' + params[\'data\'].Dead_num; }//数据格式化 * }, //左侧小导航图标 visualMap: { show : true, x: \'left\', y: \'center\', splitList: [ {start: 500, end:100000},{start: 400, end: 500}, {start: 300, end: 400},{start: 200, end: 300}, {start: 100, end: 200},{start: 0, end: 100}, ], color: [\'#5475f5\', \'#9feaa5\', \'#85daef\',\'#74e2ca\', \'#e6ac53\', \'#9fb5ea\'] }, series : { type : \'map\', map : \'${city_name}\', roam: true, layoutCenter : [ \'50%\', \'50%\' ], layoutSize : \'100%\', label : { normal : { show : true, textStyle : { color : \'#fff\' } }, emphasis : { show : false, textStyle : { color : \'#fff\' } } }, itemStyle : { normal : { areaColor : \'rgba(24,65,91,0.3)\', borderColor : \'#9DDCEB\', borderWidth : 3, shadowColor : \'#9DDCEB\', shadowBlur : 20 }, emphasis : { areaColor : \'rgba(24,65,91,0.3)\' } }, data:mydata2 } }) }); }, error:function(){ alert("请求失败"); }, }); </script> </html>
点击湖北时，得到的界面如下：