百度echarts在大数据图表开发,图表数据展示中越来越受欢迎!实现柱状图,地图,航线图,电影排行榜等!下面就来一篇echarts实现省市区县三级下钻,并且附带源码,请看下图的案例:
![](https://i-blog.csdnimg.cn/blog_migrate/dea5c37b29e56d4116232a6c91c791b4.png)
点击上图中的城市,例如:延安市,就会下钻到延安市对应的区县:
![](https://i-blog.csdnimg.cn/blog_migrate/30cd67f82c8f67eab32e0705ea3a0f03.png)
返回省级地图按钮,就会回到省市页面
部分代码如下:
<body>
<div class='main' style='width:700px;height:580px;margin:10px auto;'>
<div id='p' style='width:700px;height:580px;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);' οnclick='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('https://www.w3cschool.net/js/echarts/china/json/shanxi/shanxi.json', function (mapJson) {
echarts.registerMap('shan_xi', 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;
}
},
完整代码请访问https://www.w3cschool.net/html/html525