全国疫情可视化页面（二）省内数据分析
在上篇博客全国疫情可视化页面基础上添加新的功能，实现全国疫情地图，和各个省市的疫情情况。
本来是一头雾水，看了刘梦鑫同学的博客才有思路，然后过程中也遇到了很多问题，也是请教同学才解决的。话不多说地址奉上https://home.cnblogs.com/u/wushenjiang
一、要求
二、思路
- 1.首先，我们既然要显示二级地图，肯定需要二级地图的json或js(附在文末)。
- 2.有了二级地图，我们为全国地图绑定一个点击事件，使其跳转servlet(也可直接在本页面内进行地图内容的覆盖，但为了尽快实现功能没有那么做)。
- 3.再通过servlet跳转到二级地图界面，获取传递的参数并读取对应的二级地图json，并为其设置好样式。
- 4.通过ajax从数据库读取各个地区的数据并显示到地图上
三、效果图
四、代码
跳转的servlet代码:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String province = request.getParameter("province");
request.setAttribute("province", province);
request.getRequestDispatcher("/provincemap.jsp").forward(request, response);
}
二级页面代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css"> <script src="js/echarts.js"></script> <script src="js/jquery.js"></script> <script src="js/china.js"></script> <title>Insert title here</title> <style type="text/css"> ::-webkit-datetime-edit { padding: 1px; } ::-webkit-datetime-edit-fields-wrapper { background-color: #eee; } ::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; } ::-webkit-datetime-edit-year-field { color: purple; } ::-webkit-datetime-edit-month-field { color: blue; } ::-webkit-datetime-edit-day-field { color: green; } ::-webkit-inner-spin-button { visibility: hidden; } ::-webkit-calendar-picker-indicator { border: 1px solid #ccc; border-radius: 2px; box-shadow: inset 0 1px #fff, 0 1px #eee; background-color: #eee; background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6); color: #666; } .top{ margin: 0 auto; text-align: center; margin-top: 25px; margin-bottom: 12px; } .top span{ font-size: 18px; vertical-align: middle; } input[type=date]{ width: 250px; height: 38px; display: inline-block; vertical-align: bottom; } .main div{ display: inline-block; } </style> </head> <body> <div class="top"> <span>请输入日期：</span><input type="date" name="date" class="layui-input"><button class="layui-btn layui-btn-warm">查询</button> </div> <hr class="layui-bg-blue"> <div class="main"> <div id="chinamap" style="width: 100%;height: 350px;"></div> </div> </body> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('chinamap')); var provinces = { //23个省 "台湾": "taiwan", "河北": "hebei", "山西": "shanxi", "辽宁": "liaoning", "吉林": "jilin", "黑龙江": "heilongjiang", "江苏": "jiangsu", "浙江": "zhejiang", "安徽": "anhui", "福建": "fujian", "江西": "jiangxi", "山东": "shandong", "河南": "henan", "湖北": "hubei", "湖南": "hunan", "广东": "guangdong", "海南": "hainan", "四川": "sichuan", "贵州": "guizhou", "云南": "yunnan", "陕西": "shanxi1", "甘肃": "gansu", "青海": "qinghai", //5个自治区 "新疆": "xinjiang", "广西": "guangxi", "内蒙古": "neimenggu", "宁夏": "ningxia", "西藏": "xizang", //4个直辖市 "北京": "beijing", "天津": "tianjin", "上海": "shanghai", "重庆": "chongqing", //2个特别行政区 "香港": "xianggang", "澳门": "aomen" }; function renderChinaMap(result){ //创建中国地图 myChart.showLoading(); json=JSON.parse(result); size=json.length; data=new Array(); for(i=0;i<size;i++) data.push({ value:(parseInt(json[i].num)+parseInt(json[i].yisi)+parseInt(json[i].cure)+parseInt(json[i].dead)), name:json[i].name, }); china_option={ title: { text: '疫情分布', x:'center' }, tooltip: { formatter : function(params){ place=params.dataIndex; tip="<p>"+params.name+"</p><p>确诊人数:"+json[place].num+"</p><p>疑似人数:"+json[place].yisi+"</p><p>治愈人数:"+json[place].cure+"</p><p>死亡人数:"+json[place].dead+"</p>"; return tip; } }, //左侧小导航图标 visualMap: { show : true, x: 'left', y: 'center', splitList: [ {start: 1000}, {start: 500, end: 1000},{start: 100, end: 500}, {start: 10, end: 100},{start: 0, end: 10}, ], color: [ '#FF4500', '#FF6347','#FF7F50', '#FFA500', '#FFEFD5'] }, //配置属性 series: [{ type: 'map', mapType: 'china', data: data, label: { normal: { show: true //省份名称 }, emphasis: { show: false } } }] } myChart.setOption(china_option); myChart.hideLoading(); myChart.on('click',function(params){ renderCityMap($('input[name=date]').val(),json[params.dataIndex].code.substring(0,2),params.name); }) } function renderCityMap(date,code,name){ myChart.showLoading(); if( name in provinces ){ $.getJSON('city/'+provinces[name]+'.json', function(data){ echarts.registerMap(name, data); }); $.post( 'getEvery', {'date':date,'code':code}, function(msg){ json=JSON.parse(msg); size=json.length; data=[]; for(i=0;i<size;i++) data.push({ value:(parseInt(json[i].num)+parseInt(json[i].yisi)+parseInt(json[i].cure)+parseInt(json[i].dead)), name:json[i].name, }); console.log(data); city_option={ title: { text: '疫情分布', x:'center' }, tooltip: { formatter : function(params){ place=params.dataIndex; tip="<p>"+params.name+"</p><p>确诊人数:"+json[place].num+"</p><p>疑似人数:"+json[place].yisi+"</p><p>治愈人数:"+json[place].cure+"</p><p>死亡人数:"+json[place].dead+"</p>"; return tip; } }, //左侧小导航图标 visualMap: { show : true, x: 'left', y: 'center', splitList: [ {start: 1000}, {start: 500, end: 1000},{start: 100, end: 500}, {start: 10, end: 100},{start: 0, end: 10}, ], color: [ '#FF4500', '#FF6347','#FF7F50', '#FFA500', '#FFEFD5'] }, //配置属性 series: [{ type: 'map', mapType: name, data: data, label: { normal: { show: true //省份名称 }, emphasis: { show: false } } }] } myChart.setOption(city_option); myChart.hideLoading(); } ) } } $('button').click(function(){ var date=$('input[name=date]').val(); $.post( 'getData', {'date':$('input[name=date]').val()}, function(result){ renderChinaMap(result); } ) }) </script> </html>
需要的二级地图json和js:
链接：https://pan.baidu.com/s/1jsbHKKHR1jcU2B968iAVtQ 提取码：ezij
