echarts以地图形式显示中国疫情情况实现点击省份下钻
首先要导入对应的包。下钻用到各个省份的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>
点击湖北时，得到的界面如下：
浙公网安备 33010602011771号