百度echarts在大数据图表开发，图表数据展示中越来越受欢迎！实现柱状图，地图，航线图，电影排行榜等!下面就来一篇echarts实现省市区县三级下钻，并且附带源码，请看下图的案例:
点击上图中的城市，例如：延安市，就会下钻到延安市对应的区县：
返回省级地图按钮，就会回到省市页面
部分代码如下：
<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
9527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
