因为最近工作需要，接触到了highcharts 与echarts ，对比了一下，目前公司系统用的是highcharts的图表插件，就不想再去用echarts的图标插件了，奈何highcharts地图对中国地图支持不友好，领导要求地图，没办法，逼着自己去尝试了一把echarts ，网上关于echarts地图下钻的资料真心少，要么是骗分的，要么是不正常的，或许是我不懂大神的写法吧，初入echarts ，小白一个，如果有写的不好的地方。大家莫怪，好了，废话不多说了。上代码，

最近用hicharts无意中发现了一个比较好看的国》省》市三级下钻的地图，附上链接

https://code.hcharts.cn/highmaps/FSSm7A

ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。

建议大家使用以百度地图为底图的形式，参考实例：http://echarts.baidu.com/demo.html#map-polygon

项目目录结构如下：

json 下面放的是全国的各个省的json文件，js下面放了个贵州省的json 与贵州省下面各市json，如需下载地图json,

各省json 下载地址：http://echarts.baidu.com/download-map.html

各省下面市的json下载地址：http://ecomfe.github.io/echarts-map-tool/

记得把如下选项选中，否则地图不会显示各县的边界线

2，文件下载完毕，接下来就是写代码咯，

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE" />
  6. 	<link rel="stylesheet" href="css/index.css" />
  7. 	<script type="text/javascript" src="Plugins/jquery-easyui/jquery.min.js"></script>
  8.     <script type="text/javascript" src="js/echarts.min.js" ></script>
  9.  
  10. 	<script>
  11. 		function goBackProeMap(){
  12. 						$('#cont_pro_map').css('display','block');
  13. 					    $('#cont_city_map').css('display','none');
  14. 					    $('.retPro').css('display','none');
  15. 			}
  16. 	</script>
  17. </head>
  18. <body>
  19. 		<div class="main" style="width:1300px;height:;margin:50px auto;">
  20. 			<div id="p" style="width:1300px;height:680px;padding:10px;background:#F6F8F7;">
  21. 					<!--下属单位完成项目概况-->
  22. 				<div class="proj fl pro_map" style="position: relative;">
  23. 					<div class="proj_top">
  24. 						<p>地图总览</p>
  25. 					</div>
  26. 					<div class="retPro">
  27. 						<a href="javascript:void(0);" onclick="goBackProeMap()">
  28. 							返回省级地图
  29. 						</a>
  30. 					</div>
  31. 					<div id="cont_pro_map" style="width:580px;height:440px;float:left;position: absolute;left:10px;top:50px;z-index:1;"></div>
  32. 					<div id="cont_city_map" style="width:580px;height:440px;float:left;display: none;position: absolute;left:10px;top:50px;z-index:99;"></div>
  33.  
  34. 				</div>
  35.  
  36. 			</div>
  37. 		</div>
  38.  
  39. 		<script>
  40. 			$().ready(function(){
  41. 			      /*echarts*/
  42. 				   $.get('js/guizhou.json', function (mapJson) {
  43. 				   		echarts.registerMap('gui_zhou', mapJson);
  44. 					    var chart = echarts.init(document.getElementById('cont_pro_map'));//在id为mainMap的dom元素中显示地图
  45. 					  	chart.setOption({
  46. 					        tooltip: {
  47. 					            trigger: 'item',
  48. 					            formatter: function loadData(result){//回调函数，参数params具体格式参加官方API
  49. 					                //鼠标放到某个地市上，显示这个地市的名称加人口数
  50. 					                //例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。
  51. 					                //params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据
  52. 					               	return result.name+'<br />数据:'+result.value;
  53. 					            }
  54. 					        },
  55. 					        dataRange:{
  56. 				               	min:0,
  57. 				               	max:50,
  58. 				               	splitNumber:0,
  59. 				              	text:['高','低'],
  60. 				                realtime:false,
  61. 				               	calculable:false,
  62. 				               	selectedMode:false,
  63. 				               	realtime:false,
  64. 				               	itemWidth:10,
  65. 				               	itemHeight:60,
  66. 				               	color:['lightskyblue','#f2f2f2']
  67. 				            },
  68. 							title:{
  69. 						        text:'贵州省各市区数据总览',
  70. 						        //subtext:'',
  71. 						        x:'center',
  72. 						        y:'top',
  73. 						        textAlign:'left'
  74. 						    },
  75. 					        series: [{
  76. 					            type: 'map',
  77. 					            map: 'gui_zhou',//要和echarts.registerMap（）中第一个参数一致
  78. 					            scaleLimit: { min: 0.8, max: 1.9 },//缩放
  79. 					             mapLocation:{
  80. 			                        y:60
  81. 			                    },
  82. 			                    itemSytle:{
  83. 			                        emphasis:{label:{show:false}}
  84. 			                    },
  85. 					            label: {
  86. 					                normal: {
  87. 					                    show: true
  88. 					                },
  89. 					                emphasis: {
  90. 					                    show: true
  91. 					                }
  92. 					            },
  93. 					            data : [
  94. 					            	{name:'毕节市',value:'5'},
  95. 			                        {name:'遵义市',value:'20'},
  96. 			                        {name:'铜仁市',value:'10'},
  97. 			                        {name:'六盘水市',value:'30'},
  98. 			                        {name:'安顺市',value:'50'},
  99. 			                        {name:'贵阳市',value:'15'},
  100. 			                        {name:'黔东南苗族侗族自治州',value:'33'}
  101. 					            ]//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]
  102. 					        }]
  103. 					    }),
  104.  
  105. 					    chart.on('click', function (result) {//回调函数，点击时触发，参数params格式参加官方API
  106. 					    		setTimeout(function () {
  107.         									$('#cont_pro_map').css('display','none');
  108. 					       					$('#cont_city_map').css('display','block');
  109. 					       					$('.retPro').css('display','block');
  110.     							}, 500);
  111. 					       	 //选择地级市的单击事件
  112. 					       	var selectCity = result.name;
  113. 					       	//alert(selectCity);
  114. 							//    调取后台数据
  115. 							$.get('js/'+selectCity+'.json', function (Citymap) {
  116. 							  		echarts.registerMap(selectCity, Citymap);
  117. 							  		var myChartCity = echarts.init(document.getElementById('cont_city_map'));
  118. 							  		myChartCity.setOption({
  119. 								        tooltip: {
  120. 								            trigger: 'item',
  121. 								            formatter: function loadData(result){//回调函数，参数params具体格式参加官方API
  122. 								                //鼠标放到某个地市上，显示这个地市的名称加人口数
  123. 								                //例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。
  124. 								                //params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据
  125. 								               	return result.name+'<br />数据:'+result.value;
  126. 								            }
  127. 								        },
  128. 								        dataRange:{
  129. 							                min:0,
  130. 							                max:50,
  131. 							                text:['高','低'],
  132. 							                realtime:false,
  133. 							                calculable:false,
  134. 							                splitNumber:0,
  135. 							               	itemWidth:10,
  136. 							               	itemHeight:60,
  137. 							               	color:['lightskyblue','#f2f2f2']
  138. 							            },
  139. 										title:{
  140. 									        text:selectCity+'地图数据总览',
  141. 									        //subtext:'',
  142. 									        x:'center',
  143. 									        y:'top',
  144. 									        textAlign:'left'
  145. 									    },
  146. 								        series: [{
  147. 								            type: 'map',
  148. 								            map: selectCity ,//要和echarts.registerMap（）中第一个参数一致
  149. 								            scaleLimit: { min: 0.8, max: 1.9 },//缩放
  150. 								             mapLocation:{
  151. 						                        y:60
  152. 						                    },
  153. 						                    itemSytle:{
  154. 						                        emphasis:{label:{show:false}}
  155. 						                    },
  156. 								            label: {
  157. 								                normal: {
  158. 								                    show: true
  159. 								                },
  160. 								                emphasis: {
  161. 								                    show: true
  162. 								                }
  163. 								            },
  164. 								            data : [
  165. 								            	{name:'大方县',value:'5'},
  166. 						                        {name:'金沙县',value:'0'},
  167. 						                        {name:'织金县',value:'10'},
  168. 						                        {name:'七星关区',value:'30'},
  169. 						                        {name:'纳雍县',value:'50'},
  170. 						                        {name:'赫章县',value:'15'}
  171. 								            ]//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]
  172. 								        }]
  173. 								    })
  174. 							  		myChartCity.on('click',function(rel){
  175. 							  			setTimeout(function () {
  176.         									//$('#cont_pro_map').css('display','block');
  177. 					       					//$('#cont_city_map').css('display','none');
  178.     									}, 500);
  179.  
  180. 							  		})
  181. 							  	});
  182. 							});
  183. 					});
  184. 				});
  185. 		</script>
  186. </body>
  187. </html>

　　

下面是css文件，

  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{margin:0;font-size:12px; color:#383838;line-height:1.8;font-family:"microsoft yahei";  }
  4. form,ul,li,ol,li,dl,dt,dd,img,p,h1,h2,h3,h4,h5,h6,input,table,th,tr{margin:0;padding:0; }
  5. h1,h2,h3,h4,h5,h6{font-size:12px;}
  6. input,select{font-size:12px;outline: none;}
  7. img{border:0;}
  8. ul,li{list-style-type:none;}
  9. strong,b{font-weight:bold;}
  10. em {font-style:normal;}
  11. h1,h2,h3,h4,h5,h6 {font-weight:normal;}
  12. /* Link 全局链接样式 2012.7.28 */
  13. a{color:#393939;text-decoration:none; cursor:pointer;}
  14.  
  15. .display_no{display:none;}
  16. .display_yes{display:block;}
  17. .fl{float:left}
  18. .fr{float:right;}
  19. .clear{clear:both;}
  20.  
  21. .main_top{width:100%;height:136px;}
  22. .main_top .mdiv{display: inline-block;width:18.743333%;height:120px;background: #fff;display: block;float:left;margin:10px 20px 0px 0;}
  23. .mdiv img {margin:30px 0 30px 20px;width:60px;}
  24. .acsur{float:right;margin-right:10px;margin-top:25px;color:#fff;width: 120px;overflow: hidden;}
  25. .acsur span{display: block;font-size:20px;text-align: center;}
  26. .acsur p{font-size:24px;text-align: center;}
  27. /*main_nav*/
  28. .main_nav{width:35%;margin:15px 0;height:150px;background: #fff;float: left;border-radius: 5px;
  29. box-shadow: 2px 2px 2px #ccc;}
  30. .comp_top{margin:5px 10px;height:30px;line-height:30px;border-bottom:1px solid  #ccc;}
  31. .comp_top P{font-size:16px;font-weight: bold;}
  32. .comp_list{margin:5px 10px;height:100px;}
  33. .comp_list ul li{margin-left:10px;float:left;list-style-type: none;width:120px;height:50px;margin-top:20px;border-right: 1px solid #f2f2f2;}
  34. .comp_list ul li:last-child{border:none;}
  35. .comp_list ul li p{text-align: center;font-size:24px;}
  36. .comp_list ul li span{display:block;text-align: center;font-size:18px;}
  37. .pro_bm{color:#FF9900;}
  38. .pro_user{color:#14ABE4;}
  39. .ml{float:right;}
  40.  
  41. /*comp_xj*/
  42. .main_nav_cent{width:26.55555%;float:left;background: #fff;margin:15px 20px;height:150px;border-radius: 5px;
  43. box-shadow: 2px 2px 2px #ccc;}
  44. /*proj*/
  45. .proj{width:49.2%;background: #fff;margin-top:5px;display: inline-block;margin-bottom: 20px;border-radius: 5px;
  46. box-shadow: 2px 2px 2px #ccc;}
  47. .proj_top{margin:5px 10px;height:30px;border-bottom: 1px solid #ccc;line-height:30px;}
  48. .proj_top p{font-size:16px;font-weight: bold;}
  49. .proj_row{width:100%;margin-top:40px;clear:both;background: #fff;border-radius: 5px;
  50. box-shadow: 2px 2px 2px #ccc;margin-bottom: 20px;}
  51.  
  52. /*map*/
  53. .pro_map{width:70%;height:490px;margin-bottom: 10px;}
  54. .proj_map_list{width:29%;height:490px;background: #fff;border-radius: 5px;
  55. box-shadow: 2px 2px 2px #ccc;margin-top:5px;}
  56. #map_list ul li{margin:10px 10px;height:30px;line-height: 30px;font-size:14px;border: 1px solid #ccc;
  57.     box-shadow: 1px 1px 1px #ccc;}
  58. #map_list ul a{display: block;}
  59. #map_list ul li span{float:left;margin-left:10px;width: 40%;border-right:1px solid #ccc;}
  60. #map_list ul li em{font-style:normal;float:right;margin-right:10px;width:50%;height:30px;overflow: hidden;text-indent: 15px;}
  61. .jh{color:#D84F4B;}
  62. .wc{color:#FF0000;}
  63. .ncl{color:#0088CC;}
  64. .gd{color:#588EBD;}
  65. .gs{color:#44B6AE;}
  66. .zb{color:#14ABE4;}
  67.  
  68. .list{width: 31%;height: 440px;float: right;margin-right: 10px;border-radius:5px;border:1px solid #f2f2f2;
  69.     box-shadow: 2px 2px 2px #ccc;}
  70.  
  71. /*排名*/
  72. .ranking ul li {margin:10px 20px;height:20px;line-height: 20px;font-size:16px;margin-top:20px;}
  73. .ranking ul li span{float:left;margin-left:10px;width: 30%;overflow: hidden;height:20px;}
  74. .ranking ul li em{font-style:normal;float:left;margin-left:10px;width:60%;height:20px;overflow: hidden;background: #d0ddf3;
  75. position: relative;display: inline-block;}
  76. .sp{display: inline-block;position: absolute;left:0;background: #029be5;height:20px;}
  77. .sp_line{display: inline-block;width: 60%;text-align: center;color: #fff;z-index: 1;position: relative;font-size:14px;}
  78.  
  79. /*css3动画效果*/
  80. #cont_pro_map{
  81. 	-moz-transition: all .2s ease-out 0s;
  82. 		    -o-transition: all .2s ease-out 0s;
  83. 		    -webkit-transition: all .2s ease-out;
  84. 		    -webkit-transition-delay: 0s;
  85. 		    transition: all .2s ease-out 0s;
  86. }
  87. #cont_city_map{
  88. 	-moz-transition: all .2s ease-out 0s;
  89. 		    -o-transition: all .2s ease-out 0s;
  90. 		    -webkit-transition: all .2s ease-out;
  91. 		    -webkit-transition-delay: 0s;
  92. 		    transition: all .2s ease-out 0s;
  93.  
  94. }
  95. /*返回省级地图按钮*/
  96. .retPro{z-index:999;position: absolute;top:50px;left:10px;display: none;}
  97. .retPro a{height:30px;line-height: 30px;border:1px solid #ccc;padding:5px 10px;margin-left:20px;border-radius:5px;cursor: pointer;}

　　记得在js下面引入省的json 与 省下市的地图json

最后来张效果图

本文为作者原创，转载请注明

附上百度网盘：http://pan.baidu.com/s/1nvRwLGt

github：https://github.com/oliverdai/echarts

如不能下载，请留言

echarts 某省下钻某市地图的更多相关文章

  1. Echarts数据可视化series-map地图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. ECharts系列 (01)：地图三级下钻

    前言 最近项目中用到了地图下钻功能,GitHub上找到了一个轮子 - echarts3-chinese-map-drill-down,启动项目看了一下Demo,动画衔接的很流畅,感觉做的非常棒,膜拜大 ...

  3. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  4. echarts.js制作中国地图

    一.准备 1.  打开sublime,新建一个echarts文件夹,新建echarts.html文件 2.  在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...

  5. .net图表之ECharts随笔03-热力地图

    基于01和02 要得到如图所示的热力地图(我从NuGet上下载的包没有heatmap.js文件,没法直接搞热力图,只好暂时先搞着地图.后面尽量搞一下),一般要设置四个参数——title.tooltip ...

  6. 【Map】Echarts之iphone销量地图的使用以及详细配置

    1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language=" ...

  7. echarts 柱状图下钻功能

    var drillDown = {   getOption : function () {   var option = null;   option = {   title: {   text: ' ...

  8. 使用echarts简单制作中国地图，echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  9. 用echarts.js制作中国地图,点击对应的省市链接到指定页面

    这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...

随机推荐

  1. MVC验证11-对复杂类型使用jQuery异步验证

    原文:MVC验证11-对复杂类型使用jQuery异步验证 本篇体验使用"jQuery结合Html.BeginForm()"对复杂类型属性进行异步验证.与本篇相关的"兄弟篇 ...

  2. C# 实现 Hyper-V 虚拟机 管理

    原文:C# 实现 Hyper-V 虚拟机 管理 Hyper-V WMI Provider 工具类如下: "; break; } return status; } } /// <summ ...

  3. Oracle 11g 客户端的安装和配置。

    原文:Oracle 11g 客户端的安装和配置. 数据库和客户端在不同的机器之上. 在安装之前,在安装Oracle数据库的服务器上导航到下面的目录. 将listener.ora和tnsnames.or ...

  4. 初探Django线程发送邮件

    最近一直在纠结一个邮件发送的问题. 在本地Linux下搭建程序,不填写EMAIL设置就可以成功发送邮件,在远端的云服务器下的Linux环境就发送不了.在windows下搭建的程序也不能发送注册邮件,很 ...

  5. 快速构建Windows 8风格应用9-竖直视图

    原文:快速构建Windows 8风格应用9-竖直视图 本篇博文主要介绍竖直视图概览.关于竖直视图设计.如何构建竖直视图 竖直视图概览 Windows 8为了支持旋转的设备提供了竖屏视图,我们开发的应用 ...

  6. SqlServer-COMPUTE BY

    原文:SqlServer-COMPUTE BY COMPUTE BY子句可以通过同一个select语句即查看明细行,又查看汇总行.可以计算子组的汇总值,也可以计算整个结果集的汇总值 COMPUTE 子 ...

  7. Java 之Integer相等比较

    1.问题提出 今天在和同事讨论问题的时候,无意间谈到了Integer对象的比较,先看下代码: package test; public class IntegerEqual { /** * @para ...

  8. JavaScript的基准测试

    JavaScript的基准测试 原文:Bulletproof JavaScript benchmarks 做JavaScript的基准测试并没有想的那么简单.即使不考虑浏览器差异所带来的影响,也有很多 ...

  9. Codeforces 10D LCIS 找出最长公共子和产量增加这个序列 dp

    主题链接:点击打开链接 意甲冠军: 特定n长序列 给定k长序列 求LCIS并输出这个子序列 如有多解输出随意解.. = - = 敲的时候听着小曲儿pre的含义还没有想清楚,万万没想到就过了... #i ...

  10. C#如何将Build成功的程序集Copy到上一层目录

    C#Build成功后,会把Build好的程序集放到bin\Debug的目录下,如何将目录放到特定目录 例如放到bin目录下,copy "$(TargetFileName)" &qu ...