使用ECharts完成数据可视化
要求：提供sql文件，其中包括了某时间段内全国各省当日的疫情情况（确诊人数，疑似人数，治愈人数，死亡人数等），还有一份河北省各城市的当日疫情分布情况。第一阶段打印出某时间段内全国各省的疫情数据，使用柱状图/折线图显示数据；第二阶段构建中国地图，显示各省的疫情分布情况；第三阶段完成地图下钻，点击该省显示该省各城市的疫情分布情况。
主要考察的是JavaWeb数据可视化，这里我使用的是ECharts，我实现的查询是查询某一日的疫情分布情况，下面先看第一阶段。
第一阶段：
ChartServlet.java
1 package servlet; 2 3 import java.io.IOException; 4 import javax.servlet.ServletException; 5 import javax.servlet.annotation.WebServlet; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 import Dao.ChartDao; 11 /** 12 * Servlet implementation class ChartServlet 13 */ 14 @WebServlet("/ChartServlet") 15 public class ChartServlet extends HttpServlet { 16 private static final long serialVersionUID = 1L; 17 18 /** 19 * @see HttpServlet#HttpServlet() 20 */ 21 public ChartServlet() { 22 super(); 23 // TODO Auto-generated constructor stub 24 } 25 26 /** 27 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 28 */ 29 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 30 // TODO Auto-generated method stub 31 response.getWriter().append("Served at: ").append(request.getContextPath()); 32 } 33 34 /** 35 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 36 */ 37 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 38 // TODO Auto-generated method stub 39 //接收来自HTML的ajax数据（即输入框中的日期） 40 request.setCharacterEncoding("utf-8"); 41 response.setContentType("text/html;charset=UTF-8"); 42 String date=request.getParameter("date"); 43 //在ChartDao中完成查询后返回json字符串 44 response.getWriter().write(ChartDao.search(date)); 45 } 46 47 }
本次实现该功能，对Servlet的搭建并不多，主要在于HTML上ajax的编写。
连接数据库：DBUtil.java
1 package util; 2 3 4 import java.sql.Connection; 5 import java.sql.DriverManager; 6 import java.sql.ResultSet; 7 import java.sql.SQLException; 8 import java.sql.Statement; 9 10 11 12 public class DBUtil { 13 //useSSL=false:避免连接时出现SSL问题 14 public static String db_url = "jdbc:mysql://localhost:3306/payiqing?useSSL=false"; 15 public static String db_user = "root"; 16 public static String db_pass = "Inazuma"; 17 18 public static Connection getConn () { 19 Connection conn = null; 20 21 try { 22 Class.forName("com.mysql.jdbc.Driver");//加载JDBC驱动 23 conn = DriverManager.getConnection(db_url, db_user, db_pass); 24 } catch (Exception e) { 25 e.printStackTrace(); 26 } 27 28 return conn; 29 } 30 31 32 public static void close (Statement state, Connection conn) { 33 if (state != null) { 34 try { 35 state.close(); 36 } catch (SQLException e) { 37 e.printStackTrace(); 38 } 39 } 40 41 if (conn != null) { 42 try { 43 conn.close(); 44 } catch (SQLException e) { 45 e.printStackTrace(); 46 } 47 } 48 } 49 50 public static void close (ResultSet rs, Statement state, Connection conn) { 51 if (rs != null) { 52 try { 53 rs.close(); 54 } catch (SQLException e) { 55 e.printStackTrace(); 56 } 57 } 58 59 if (state != null) { 60 try { 61 state.close(); 62 } catch (SQLException e) { 63 e.printStackTrace(); 64 } 65 } 66 67 if (conn != null) { 68 try { 69 conn.close(); 70 } catch (SQLException e) { 71 e.printStackTrace(); 72 } 73 } 74 } 75 76 77 }
连接操作不作过多叙述（标准写法）。
查询数据库：ChartDao.java
1 package Dao; 2 3 import java.sql.Connection; 4 import java.sql.ResultSet; 5 import java.sql.Statement; 6 7 import net.sf.json.JSONArray; 8 import net.sf.json.JSONObject; 9 import util.DBUtil; 10 11 public class ChartDao { 12 public static String search(String date) { 13 //定义JSONArray数组对象 14 JSONArray jsonarray=new JSONArray(); 15 Connection con=DBUtil.getConn(); 16 Statement state=null; 17 //通过日期进行模糊查询 18 String sql="select distinct Province from info where Date like '%"+date+"%'"; 19 String provinceStr=""; 20 ResultSet res=null; 21 try { 22 //定义JSONObject对象 23 JSONObject jsonob=new JSONObject(); 24 state=con.createStatement(); 25 res=state.executeQuery(sql); 26 String inputstr=""; 27 //由于echarts文件中关于中国地图的省份所记录的名字与数据库中不同，提取数据库中省份名字的时候要进行预处理，先用数组保存 28 while(res.next()) { 29 provinceStr=provinceStr+res.getString("Province")+","; 30 } 31 res.close(); 32 String str[]=provinceStr.split(","); 33 //对各个省份名称进行处理，与echarts文件中的名字对应（若不对应则构建中国地图时无法染色） 34 for(int i=0;i<str.length;i++) { 35 if(str[i].trim().equals("")) { 36 continue; 37 } 38 if(str[i].length()==3) { 39 inputstr=str[i].substring(0, 2); 40 }else if(str[i].equals("黑龙江省")) { 41 inputstr="黑龙江"; 42 }else if(str[i].equals("广西壮族自治区")) { 43 inputstr="广西"; 44 }else if(str[i].equals("内蒙古自治区")) { 45 inputstr="内蒙古"; 46 }else if(str[i].equals("宁夏回族自治区")) { 47 inputstr="宁夏"; 48 }else if(str[i].equals("新疆维吾尔自治区")) { 49 inputstr="新疆"; 50 }else if(str[i].equals("西藏自治区")) { 51 inputstr="西藏"; 52 }else if(str[i].length()==2) { 53 inputstr=str[i]; 54 } 55 //根据省份筛选“确诊人数”，数据库中省份名字出现重合情况，根据省份对其Confirmed_num数据进行求和操作再拿出（确诊人数为地图染色依据） 56 sql="select sum(Confirmed_num),sum(Yisi_num),sum(Cured_num),sum(Dead_num),City from info where Province='"+str[i]+"'"; 57 res=state.executeQuery(sql); 58 res.next(); 59 //将选好的数据put进JSONObject对象中 60 jsonob.put("Province", inputstr); 61 jsonob.put("Confirmed", res.getInt(1)); 62 jsonob.put("Yisi", res.getString(2)); 63 jsonob.put("Cured", res.getString(3)); 64 jsonob.put("Dead", res.getString(4)); 65 res.close(); 66 //这里筛选地区编码，但实例中并没有用到（查询思想若用到地区编码可使用该数据） 67 sql="select * from info where Date like '%"+date+"%' and Province='"+str[i]+"'"; 68 res=state.executeQuery(sql); 69 res.next(); 70 jsonob.put("Code", res.getString("Code")); 71 res.close(); 72 //将JSONObject对象写入JSONArray数组中，构成json数组 73 jsonarray.add(jsonob); 74 } 75 }catch(Exception e) { 76 e.printStackTrace(); 77 } 78 //将json数组转化成String类型，返回 79 return jsonarray.toString(); 80 } 81 }
这里实现的就是连接数据库提取数据操作，由于前端页面是用HTML编写，使用ajax进行传值，因此回调为一个json数组的字符串，这样在前端取值的时候会十分方便，由于数据库中对日期记录精确到了秒，为了输入方便一些，这里采用了模糊查询。
前端页面：Search.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>查询日期</title> 6 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/echarts.js"></script> 8 </head> 9 <body> 10 日期:<input type="text" name="date"> 11 <button onclick="search()">查询</button> 12 <!--引用引入的echarts文件，这里我作了两个图，因此声明两个div --> 13 <div id="charts" style="width:1000px;height:800px;float:left"></div> 14 <div id="charts2" style="width:1000px;height:800px;float:left"></div> 15 <script type="text/javascript"> 16 <!--写点击事件--> 17 function search(){ 18 date=$("input[name=date]").val(); 19 <!--ajax传值主体，设置post，传值类型为json--> 20 $.ajax({ 21 type:"post", 22 url:"ChartServlet", 23 datatype:"json", 24 data:{"date":date}, 25 success:function(msg){ 26 var json=JSON.parse(msg); 27 var province=[]; 28 var confirmed=[]; 29 size=json.length; 30 <!--这里进行了动态添加table表格--> 31 tr="<tr><th>省份</th><th>确诊人数</th><th>疑似人数</th><th>治愈人数</th><th>死亡人数</th><th>地区编码</th></tr>"; 32 $('.head').append(tr); 33 for(i=0;i<size;i++){ 34 $('.main').append("<tr></tr>"); 35 province.push(json[i].Province); 36 confirmed.push(json[i].Confirmed); 37 } 38 $('.main tr').each(function(i){ 39 $(this).append("<td>"+json[i].Province+"</td>"); 40 $(this).append("<td>"+json[i].Confirmed+"</td>"); 41 $(this).append("<td>"+json[i].Yisi+"</td>"); 42 $(this).append("<td>"+json[i].Cured+"</td>"); 43 $(this).append("<td>"+json[i].Dead+"</td>"); 44 $(this).append("<td>"+json[i].Code+"</td>"); 45 }) 46 47 var mychart=echarts.init(document.getElementById('charts')); 48 var mychart2=echarts.init(document.getElementById('charts2')); 49 <!--定义柱状图的格式--> 50 var option={ 51 title:{ 52 text:'各省疫情当日确诊人数情况' 53 }, 54 tooltip:{}, 55 legend:{ 56 data:['确诊人数'] 57 }, 58 xAxis:{ 59 axisLabel:{interval:0,rotate:30}, 60 data:province 61 }, 62 yAxis:{}, 63 series:[{ 64 name:'确诊人数', 65 type:'bar', 66 data:confirmed 67 }] 68 }; 69 <!--定义折线图的格式--> 70 var option2={ 71 title:{ 72 text:'各省疫情当日确诊人数情况' 73 }, 74 tooltip:{}, 75 legend:{ 76 data:['确诊人数'] 77 }, 78 xAxis:{ 79 axisLabel:{interval:0,rotate:30}, 80 data:province 81 }, 82 yAxis:{}, 83 series:[{ 84 name:'确诊人数', 85 type:'line', 86 data:confirmed 87 }] 88 }; 89 <!--调用--> 90 mychart.setOption(option); 91 mychart2.setOption(option2); 92 }, 93 error:function(){ 94 alert("请求失败"); 95 } 96 }); 97 } 98 </script> 99 <!--动态添加的表格格式 --> 100 <table border="2"> 101 <thead class="head"> 102 </thead> 103 <tbody class="main"></tbody> 104 </table> 105 </body> 106 </html>
对HTML的编写，我初次尝试了ajax传值，这里要注意的是23行，之前学习的时候给的文档都是dataType ，而我在这么写的时候，JSON.parse发生了错误，后来改成了datatype才正常运行，具体错误原因我还不清楚。按照老师要求，表和图要在同一页面，因此表格需要使用动态添加。代码如上。
运行截图：
这是最终实现的样子。
第二阶段：
使用的依然是ChartServlet和 ChartDao。这里需要解释一下之前代码注释中提到的“省份名称预处理”。在我下载的ECharts文件中，中国省份的名称与数据库中的名称是不一样的（例：地图——吉林，数据库——吉林省），如果名称不对称，就无法对地图进行染色，所以需要进行预处理操作。
前端：FirstMap.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第二阶段</title> 6 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/echarts.js"></script> 8 <script type="text/javascript" src="js/china.js"></script> 9 </head> 10 <body> 11 日期:<input type="text" name="date"> 12 <button onclick="search()">查询</button> 13 <div id="charts" style="width:1000px;height:1000px"></div> 14 <script type="text/javascript"> 15 function search(){ 16 date=$("input[name=date]").val(); 17 $.ajax({ 18 type:"post", 19 url:"ChartServlet", 20 datatype:"json", 21 data:{"date":date}, 22 success:function(msg){ 23 var json=JSON.parse(msg); 24 var mapdata=[]; 25 size=json.length; 26 <!--json数组数据写在mapdata里，最后赋给地图，value定义的是确诊人数数据，这也是染色参考标准--> 27 for(i=0;i<size;i++){ 28 mapdata.push({name:json[i].Province,value:json[i].Confirmed}); 29 } 30 var mychart=echarts.init(document.getElementById('charts')); 31 <!--中国地图已经引入，这里编写其他信息--> 32 var option={ 33 backgroundColor:'#ccc', 34 title:{ 35 text:'各省疫情当日确诊人数情况' 36 }, 37 <!--重写悬浮提示框，这样在鼠标指到某省时会显示更多详细数据--> 38 tooltip:{ 39 trigger:'item', 40 formatter:function(params){ 41 <!--由于写入mapdata时是按顺序写的，因此获取到下标后对应的json数组下标是一致的，直接显示其他数据即可--> 42 index=params.dataIndex; 43 res="<p>"+params.name+"</p><p>确诊人数:"+json[index].Confirmed 44 +"</p><p>疑似人数:"+json[index].Yisi 45 +"</p><p>治愈人数:"+json[index].Cured 46 +"</p><p>死亡人数:"+json[index].Dead+"</p>"; 47 return res; 48 } 49 }, 50 <!--定义染色，以及染色参考数据，这里是依次对应的--> 51 visualMap:{ 52 show:true, 53 x:'left', 54 y:'bottom', 55 splitList:[ 56 {start:10000}, 57 {start:5000,end:9999}, 58 {start:1000,end:4999}, 59 {start:1,end:999}, 60 ], 61 color:['#930000','#EA0000','#ff7575','#F9F900'] 62 }, 63 series:[{ 64 name:'确诊人数', 65 type:'map', 66 mapType:'china', 67 roam:false, 68 label:{ 69 normal:{ 70 show:true 71 }, 72 emphasis:{ 73 show:false 74 } 75 }, 76 <!--data赋值mapdata--> 77 data:mapdata 78 }] 79 }; 80 81 mychart.setOption(option); 82 }, 83 error:function(){ 84 alert("请求失败"); 85 } 86 }); 87 } 88 </script> 89 </body> 90 </html>
地图引入并不复杂，因为这里的中国地图板块是预先设计好的，直接引用即可，需要注意的是定义染色时的数据参考，以及打算用什么数据作为染色标准，确定好后写入mapdata数组即可，这里初次编写时我以为要像字符串数组一样需要引号，后来学习得知这里可以直接写入，用上引号反而不对。。。还有就是重写tooltip（悬浮提示框），这个东西默认值是只显示你的染色数据（确诊人数），要显示其他数据则需要用formatter进行重写。
运行截图：
第二阶段非常简单，因为中国地图有现成的文件，引入即可。
第三阶段：
第三阶段要实现地图下钻，因此需要手动注册地图，我只做了河北省的地图下钻（因为河北省有单独的一份数据库文件），由于涉及到读取不同的数据库文件，而且这里用到了ajax的多次请求，因此我编写了其他Servlet文件和Dao层文件
CityServlet.java
1 package servlet; 2 3 import java.io.IOException; 4 import javax.servlet.ServletException; 5 import javax.servlet.annotation.WebServlet; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 import Dao.CityDao; 11 12 /** 13 * Servlet implementation class CityServlet 14 */ 15 @WebServlet("/CityServlet") 16 public class CityServlet extends HttpServlet { 17 private static final long serialVersionUID = 1L; 18 19 /** 20 * @see HttpServlet#HttpServlet() 21 */ 22 public CityServlet() { 23 super(); 24 // TODO Auto-generated constructor stub 25 } 26 27 /** 28 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 29 */ 30 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 31 // TODO Auto-generated method stub 32 response.getWriter().append("Served at: ").append(request.getContextPath()); 33 } 34 35 /** 36 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 37 */ 38 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 39 // TODO Auto-generated method stub 40 request.setCharacterEncoding("utf-8"); 41 response.setContentType("text/html;charset=UTF-8"); 42 String date=request.getParameter("dateC"); 43 //在河北省数据库中，记录日期的格式是X年X月X日，其他数据库格式是X-X-X，因此需要对接收的日期信息进行格式更改 44 String dateStr[]=date.split("-"); 45 char judge1,judge2; 46 judge1=dateStr[1].charAt(0); 47 judge2=dateStr[2].charAt(0); 48 if(judge1=='0') { 49 dateStr[1]=dateStr[1].substring(1); 50 } 51 if(judge2=='0') { 52 dateStr[2]=dateStr[2].substring(1); 53 } 54 String finaldate=dateStr[0]+"年"+dateStr[1]+"月"+dateStr[2]+"日"; 55 response.getWriter().write(CityDao.searchCity(finaldate)); 56 } 57 58 }
Servlet文件很简单，需要注意的是日期格式问题。河北省数据库是“年月日”，其他数据库用“-”代替。
CityDao.java
1 package Dao; 2 3 import java.sql.Connection; 4 import java.sql.ResultSet; 5 import java.sql.Statement; 6 7 import net.sf.json.JSONArray; 8 import net.sf.json.JSONObject; 9 import util.DBUtil; 10 11 public class CityDao { 12 public static String searchCity(String date) { 13 JSONArray jsonarrayC=new JSONArray(); 14 Connection con=DBUtil.getConn(); 15 Statement state=null; 16 //读取了不同的数据库 17 String sql="select City from hebei_city_info where Date like '%"+date+"%'"; 18 String CityStr=""; 19 ResultSet res=null; 20 try { 21 JSONObject jsonobC=new JSONObject(); 22 state=con.createStatement(); 23 res=state.executeQuery(sql); 24 while(res.next()) { 25 CityStr=CityStr+res.getString("City")+","; 26 } 27 res.close(); 28 String str[]=CityStr.split(","); 29 for(int i=0;i<str.length;i++) { 30 if(str[i].trim().equals("")) { 31 continue; 32 } 33 //读取信息 34 sql="select Confirmed_num from hebei_city_info where City='"+str[i]+"'"; 35 res=state.executeQuery(sql); 36 res.next(); 37 String CNum=res.getString("Confirmed_num"); 38 CNum=CNum.substring(0, CNum.length()-1); 39 jsonobC.put("City", str[i]); 40 jsonobC.put("CityConfirmed", CNum); 41 res.close(); 42 //写入JSONArray数组 43 jsonarrayC.add(jsonobC); 44 } 45 }catch(Exception e) { 46 e.printStackTrace(); 47 } 48 //类型转换，返回 49 return jsonarrayC.toString(); 50 } 51 }
大体上没有改变，因为新注入的地图城市名字和数据库中对应，所以不作修改，直接写入即可。
前端：SecondMap.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第三阶段</title> 6 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/echarts.js"></script> 8 <script type="text/javascript" src="js/china.js"></script> 9 </head> 10 <body> 11 日期:<input type="text" name="date"> 12 <button onclick="search()">查询</button> 13 <div id="charts" style="width:1000px;height:1000px"></div> 14 <script type="text/javascript"> 15 function search(){ 16 date=$("input[name=date]").val(); 17 <!--这里是第一次请求，目的是显示第二阶段的中国地图全貌--> 18 $.ajax({ 19 type:"post", 20 url:"ChartServlet", 21 datatype:"json", 22 data:{"date":date}, 23 success:function(msg){ 24 var json=JSON.parse(msg); 25 var mapdata=[]; 26 var citydata=[]; 27 size=json.length; 28 for(i=0;i<size;i++){ 29 mapdata.push({name:json[i].Province,value:json[i].Confirmed}); 30 } 31 var mychart=echarts.init(document.getElementById('charts')); 32 <!--这里注册省份的地图，需要事先引入相应的json文件--> 33 var ThePro={ 34 '安徽':'mapjson/anhui.json', 35 '北京':'mapjson/beijing.json', 36 '重庆':'mapjson/chongqing.json', 37 '福建':'mapjson/fujian.json', 38 '甘肃':'mapjson/gansu.json', 39 '广东':'mapjson/guangdong.json', 40 '广西':'mapjson/guangxi.json', 41 '桂州':'mapjson/guizhou.json', 42 '海南':'mapjson/hainan.json', 43 '河北':'mapjson/hebei.json', 44 '黑龙江':'mapjson/heilongjiang.json', 45 '河南':'mapjson/henan.json', 46 '香港':'mapjson/hongkong.json', 47 '湖北':'mapjson/hubei.json', 48 '湖南':'mapjson/hunan.json', 49 '江苏':'mapjson/jiangsu.json', 50 '江西':'mapjson/jiangxi.json', 51 '吉林':'mapjson/jilin.json', 52 '辽宁':'mapjson/liaoning.json', 53 '澳门':'mapjson/macau.json', 54 '内蒙古':'mapjson/neimenggu.json', 55 '宁夏':'mapjson/ningxia.json', 56 '青海':'mapjson/qinghai.json', 57 '山西':'mapjson/shan1xi.json', 58 '陕西':'mapjson/shan3xi.json', 59 '山东':'mapjson/shandong.json', 60 '上海':'mapjson/shanghai.json', 61 '四川':'mapjson/sichuan.json', 62 '台湾':'mapjson/taiwan.json', 63 '新疆':'mapjson/xinjiang.json', 64 '西藏':'mapjson/xizang.json', 65 '云南':'mapjson/yunnan.json', 66 '浙江':'mapjson/zhejiang.json' 67 }; 68 <!--中国地图全貌的设置，与第二阶段一样--> 69 var option={ 70 backgroundColor:'#ccc', 71 title:{ 72 text:'各省疫情当日确诊人数情况' 73 }, 74 tooltip:{ 75 trigger:'item', 76 formatter:function(params){ 77 index=params.dataIndex; 78 res="<p>"+params.name+"</p><p>确诊人数:"+json[index].Confirmed 79 +"</p><p>疑似人数:"+json[index].Yisi 80 +"</p><p>治愈人数:"+json[index].Cured 81 +"</p><p>死亡人数:"+json[index].Dead+"</p>"; 82 return res; 83 } 84 }, 85 visualMap:{ 86 show:true, 87 x:'left', 88 y:'bottom', 89 splitList:[ 90 {start:10000}, 91 {start:5000,end:9999}, 92 {start:1000,end:4999}, 93 {start:1,end:999}, 94 ], 95 color:['#930000','#EA0000','#ff7575','#F9F900'] 96 }, 97 series:[{ 98 name:'确诊人数', 99 type:'map', 100 mapType:'china', 101 roam:false, 102 label:{ 103 normal:{ 104 show:true 105 }, 106 emphasis:{ 107 show:false 108 } 109 }, 110 data:mapdata 111 }], 112 }; 113 <!--增加点击事件--> 114 mychart.setOption(option,false); 115 mychart.on("click",chartClick); 116 function chartClick(param){ 117 <!--点击时获取所点击的省份名称--> 118 mychart.setOption(option,false); 119 var selectedPro=param.name; 120 if(!ThePro[selectedPro]){ 121 option.series.splice(1); 122 option.legend=null; 123 option.visualMap=null; 124 mychart.setOption(option,true); 125 return; 126 } 127 <!--第二次ajax请求，注意url的改变--> 128 $.ajax({ 129 type:"post", 130 url:"CityServlet", 131 datatype:"json", 132 data:{"dateC":date}, 133 success:function(msgC){ 134 console.log(msgC); 135 var jsonC=JSON.parse(msgC); 136 var citydata=[]; 137 sizeC=jsonC.length; 138 for(j=0;j<sizeC;j++){ 139 citydata.push({name:jsonC[j].City,value:jsonC[j].CityConfirmed}); 140 } 141 <!--根据点击省份的名称获取该省份的地图，随后进行相关界定--> 142 $.get(ThePro[selectedPro],function(geojson){ 143 echarts.registerMap(selectedPro,geojson); 144 option={ 145 backgroundColor:'#ccc', 146 title:{ 147 text:'河北省确诊人数情况' 148 }, 149 tooltip:{ 150 trigger:'item', 151 }, 152 <!--这里染色标准进行了改动，因为省内的确诊人数量级不同--> 153 visualMap:{ 154 show:true, 155 x:'left', 156 y:'bottom', 157 splitList:[ 158 {start:10}, 159 {start:7,end:9}, 160 {start:4,end:6}, 161 {start:1,end:3}, 162 ], 163 color:['#930000','#EA0000','#ff7575','#F9F900'] 164 }, 165 <!--注意mapType，这里selectedPro实际就是省份名称，String格式--> 166 series:[{ 167 name:'确诊人数', 168 type:'map', 169 mapType:selectedPro, 170 roam:false, 171 label:{ 172 normal:{ 173 show:true 174 }, 175 emphasis:{ 176 show:false 177 } 178 }, 179 data:citydata 180 }], 181 }; 182 mychart.setOption(option,true); 183 }) 184 }, 185 error:function(){ 186 alert("请求失败"); 187 } 188 }); 189 } 190 }, 191 error:function(){ 192 alert("请求失败"); 193 } 194 }); 195 196 } 197 </script> 198 </body> 199 </html>
实现地图下钻需要的就是注册地图，注册地图通常是引入相应的json文件。之后就是设置点击事件，最后对新地图进行设置即可，这里还进行了ajax的多次请求。
运行截图：
未点击：
点击：
