echarts 某省下钻某市地图
因为最近工作需要，接触到了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，文件下载完毕，接下来就是写代码咯，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="Plugins/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js" ></script> <script>
function goBackProeMap(){
$('#cont_pro_map').css('display','block');
$('#cont_city_map').css('display','none');
$('.retPro').css('display','none');
}
</script>
</head>
<body>
<div class="main" style="width:1300px;height:;margin:50px auto;">
<div id="p" style="width:1300px;height:680px;padding:10px;background:#F6F8F7;">
<!--下属单位完成项目概况-->
<div class="proj fl pro_map" style="position: relative;">
<div class="proj_top">
<p>地图总览</p>
</div>
<div class="retPro">
<a href="javascript:void(0);" onclick="goBackProeMap()">
返回省级地图
</a>
</div>
<div id="cont_pro_map" style="width:580px;height:440px;float:left;position: absolute;left:10px;top:50px;z-index:1;"></div>
<div id="cont_city_map" style="width:580px;height:440px;float:left;display: none;position: absolute;left:10px;top:50px;z-index:99;"></div> </div> </div>
</div> <script>
$().ready(function(){
/*echarts*/
$.get('js/guizhou.json', function (mapJson) {
echarts.registerMap('gui_zhou', mapJson);
var chart = echarts.init(document.getElementById('cont_pro_map'));//在id为mainMap的dom元素中显示地图
chart.setOption({
tooltip: {
trigger: 'item',
formatter: function loadData(result){//回调函数，参数params具体格式参加官方API
//鼠标放到某个地市上，显示这个地市的名称加人口数
//例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。
//params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据
return result.name+'<br />数据:'+result.value;
}
},
dataRange:{
min:0,
max:50,
splitNumber:0,
text:['高','低'],
realtime:false,
calculable:false,
selectedMode:false,
realtime:false,
itemWidth:10,
itemHeight:60,
color:['lightskyblue','#f2f2f2']
},
title:{
text:'贵州省各市区数据总览',
//subtext:'',
x:'center',
y:'top',
textAlign:'left'
},
series: [{
type: 'map',
map: 'gui_zhou',//要和echarts.registerMap（）中第一个参数一致
scaleLimit: { min: 0.8, max: 1.9 },//缩放
mapLocation:{
y:60
},
itemSytle:{
emphasis:{label:{show:false}}
},
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data : [
{name:'毕节市',value:'5'},
{name:'遵义市',value:'20'},
{name:'铜仁市',value:'10'},
{name:'六盘水市',value:'30'},
{name:'安顺市',value:'50'},
{name:'贵阳市',value:'15'},
{name:'黔东南苗族侗族自治州',value:'33'}
]//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]
}]
}), chart.on('click', function (result) {//回调函数，点击时触发，参数params格式参加官方API
setTimeout(function () {
$('#cont_pro_map').css('display','none');
$('#cont_city_map').css('display','block');
$('.retPro').css('display','block');
}, 500);
//选择地级市的单击事件
var selectCity = result.name;
//alert(selectCity);
// 调取后台数据
$.get('js/'+selectCity+'.json', function (Citymap) {
echarts.registerMap(selectCity, Citymap);
var myChartCity = echarts.init(document.getElementById('cont_city_map'));
myChartCity.setOption({
tooltip: {
trigger: 'item',
formatter: function loadData(result){//回调函数，参数params具体格式参加官方API
//鼠标放到某个地市上，显示这个地市的名称加人口数
//例如 params.name：当前地市名称。params.value：你传入的json数据与当前地市匹配的一项。
//params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据
return result.name+'<br />数据:'+result.value;
}
},
dataRange:{
min:0,
max:50,
text:['高','低'],
realtime:false,
calculable:false,
splitNumber:0,
itemWidth:10,
itemHeight:60,
color:['lightskyblue','#f2f2f2']
},
title:{
text:selectCity+'地图数据总览',
//subtext:'',
x:'center',
y:'top',
textAlign:'left'
},
series: [{
type: 'map',
map: selectCity ,//要和echarts.registerMap（）中第一个参数一致
scaleLimit: { min: 0.8, max: 1.9 },//缩放
mapLocation:{
y:60
},
itemSytle:{
emphasis:{label:{show:false}}
},
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data : [
{name:'大方县',value:'5'},
{name:'金沙县',value:'0'},
{name:'织金县',value:'10'},
{name:'七星关区',value:'30'},
{name:'纳雍县',value:'50'},
{name:'赫章县',value:'15'}
]//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]
}]
})
myChartCity.on('click',function(rel){
setTimeout(function () {
//$('#cont_pro_map').css('display','block');
//$('#cont_city_map').css('display','none');
}, 500); })
});
});
});
});
</script>
</body>
</html>
下面是css文件，
@charset "utf-8";
/* CSS Document */
body{margin:0;font-size:12px; color:#383838;line-height:1.8;font-family:"microsoft yahei"; }
form,ul,li,ol,li,dl,dt,dd,img,p,h1,h2,h3,h4,h5,h6,input,table,th,tr{margin:0;padding:0; }
h1,h2,h3,h4,h5,h6{font-size:12px;}
input,select{font-size:12px;outline: none;}
img{border:0;}
ul,li{list-style-type:none;}
strong,b{font-weight:bold;}
em {font-style:normal;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
/* Link 全局链接样式 2012.7.28 */
a{color:#393939;text-decoration:none; cursor:pointer;} .display_no{display:none;}
.display_yes{display:block;}
.fl{float:left}
.fr{float:right;}
.clear{clear:both;} .main_top{width:100%;height:136px;}
.main_top .mdiv{display: inline-block;width:18.743333%;height:120px;background: #fff;display: block;float:left;margin:10px 20px 0px 0;}
.mdiv img {margin:30px 0 30px 20px;width:60px;}
.acsur{float:right;margin-right:10px;margin-top:25px;color:#fff;width: 120px;overflow: hidden;}
.acsur span{display: block;font-size:20px;text-align: center;}
.acsur p{font-size:24px;text-align: center;}
/*main_nav*/
.main_nav{width:35%;margin:15px 0;height:150px;background: #fff;float: left;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;}
.comp_top{margin:5px 10px;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
.comp_top P{font-size:16px;font-weight: bold;}
.comp_list{margin:5px 10px;height:100px;}
.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;}
.comp_list ul li:last-child{border:none;}
.comp_list ul li p{text-align: center;font-size:24px;}
.comp_list ul li span{display:block;text-align: center;font-size:18px;}
.pro_bm{color:#FF9900;}
.pro_user{color:#14ABE4;}
.ml{float:right;} /*comp_xj*/
.main_nav_cent{width:26.55555%;float:left;background: #fff;margin:15px 20px;height:150px;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;}
/*proj*/
.proj{width:49.2%;background: #fff;margin-top:5px;display: inline-block;margin-bottom: 20px;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;}
.proj_top{margin:5px 10px;height:30px;border-bottom: 1px solid #ccc;line-height:30px;}
.proj_top p{font-size:16px;font-weight: bold;}
.proj_row{width:100%;margin-top:40px;clear:both;background: #fff;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;margin-bottom: 20px;} /*map*/
.pro_map{width:70%;height:490px;margin-bottom: 10px;}
.proj_map_list{width:29%;height:490px;background: #fff;border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;margin-top:5px;}
#map_list ul li{margin:10px 10px;height:30px;line-height: 30px;font-size:14px;border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;}
#map_list ul a{display: block;}
#map_list ul li span{float:left;margin-left:10px;width: 40%;border-right:1px solid #ccc;}
#map_list ul li em{font-style:normal;float:right;margin-right:10px;width:50%;height:30px;overflow: hidden;text-indent: 15px;}
.jh{color:#D84F4B;}
.wc{color:#FF0000;}
.ncl{color:#0088CC;}
.gd{color:#588EBD;}
.gs{color:#44B6AE;}
.zb{color:#14ABE4;} .list{width: 31%;height: 440px;float: right;margin-right: 10px;border-radius:5px;border:1px solid #f2f2f2;
box-shadow: 2px 2px 2px #ccc;} /*排名*/
.ranking ul li {margin:10px 20px;height:20px;line-height: 20px;font-size:16px;margin-top:20px;}
.ranking ul li span{float:left;margin-left:10px;width: 30%;overflow: hidden;height:20px;}
.ranking ul li em{font-style:normal;float:left;margin-left:10px;width:60%;height:20px;overflow: hidden;background: #d0ddf3;
position: relative;display: inline-block;}
.sp{display: inline-block;position: absolute;left:0;background: #029be5;height:20px;}
.sp_line{display: inline-block;width: 60%;text-align: center;color: #fff;z-index: 1;position: relative;font-size:14px;} /*css3动画效果*/
#cont_pro_map{
-moz-transition: all .2s ease-out 0s;
-o-transition: all .2s ease-out 0s;
-webkit-transition: all .2s ease-out;
-webkit-transition-delay: 0s;
transition: all .2s ease-out 0s;
}
#cont_city_map{
-moz-transition: all .2s ease-out 0s;
-o-transition: all .2s ease-out 0s;
-webkit-transition: all .2s ease-out;
-webkit-transition-delay: 0s;
transition: all .2s ease-out 0s; }
/*返回省级地图按钮*/
.retPro{z-index:999;position: absolute;top:50px;left:10px;display: none;}
.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 某省下钻某市地图的更多相关文章
- Echarts数据可视化series-map地图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- ECharts系列 (01)：地图三级下钻
前言 最近项目中用到了地图下钻功能,GitHub上找到了一个轮子 - echarts3-chinese-map-drill-down,启动项目看了一下Demo,动画衔接的很流畅,感觉做的非常棒,膜拜大 ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- echarts.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
- .net图表之ECharts随笔03-热力地图
基于01和02 要得到如图所示的热力地图(我从NuGet上下载的包没有heatmap.js文件,没法直接搞热力图,只好暂时先搞着地图.后面尽量搞一下),一般要设置四个参数——title.tooltip ...
- 【Map】Echarts之iphone销量地图的使用以及详细配置
1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language=" ...
- echarts 柱状图下钻功能
var drillDown = { getOption : function () { var option = null; option = { title: { text: ' ...
- 使用echarts简单制作中国地图，echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
- 用echarts.js制作中国地图,点击对应的省市链接到指定页面
这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...
随机推荐
- Serialization performance analysis
Serialization performance analysis http://www.skyscanner.net/blogs/serialization-performance-analysi ...
- 疯狂html5演讲（两）：HTML5简经常使用的元素和属性（一个）:html5保留经常使用的元素
html5取出一小部分的元素和属性:主要删除的各种元素和属性与文档相关的风格.例<font>.width等待,html5建议规范css样式表来控制html文档样式. 1.基本元素 < ...
- 11g R2RAC Dynamic remastering
In this post, I will demonstrate dynamic remastering of the resources in RAC . In RAC, every data bl ...
- SQL SERVER 2005中如何获取日期（一个月的最后一日、上个月第一天、最后一天、一年的第一日等等）
原文:[转]SQL SERVER 2005中如何获取日期(一个月的最后一日.上个月第一天.最后一天.一年的第一日等等) 在网上找到的一篇文章,相当不错哦O(∩_∩)O~ //C#本周第一天 ...
- ProvissyTool Update Support Page
DO NOT REPLY. ############# #??????# ############
- HTML的框架，表格
#2 HTML的框架,表格 [以下是个人笔记,由于水平有限,因此有错误的地方,希望M我.谢谢] 表格|表单|框架---------------表格:布局 ----现在很少用到好处: 适合做 ...
- C# socket通信随记回顾
----tcp(传输 控制 协议)是可靠消息:三次握手(发给对方,对方发给自己,证明对方接到消息,在发给对方,说明自己能接到对方消息,这样就都知道了):tcp:每发送一次消息,对方都会回复,证明接受到 ...
- 分享一个c#写的开源分布式消息队列equeue
分享一个c#写的开源分布式消息队列equeue 前言 equeue消息队列中的专业术语 Topic Queue Producer Consumer Consumer Group Broker 集群消费 ...
- JavaScript 动画库和开发框架
1. Tween JS TweenJS 是一个简单的 JavaScript 补间动画库.能够很好的和 EaselJS 库集成,但也不依赖或特定于它.它支持渐变的数字对象属性和 CSS 样式属性.API ...
- Redis一些命令总结
链接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsave:返回上次成功将 ...