根据php后台数据，映射到地图上所有的省份，地图市下钻的形式，每次下钻到新地图不合并（合并缩放的话会导致下钻地图位置找不到了），添加了自定义工具栏里面的返回到顶级下钻地图
页面部分
<!-- widget grid --> <section id="widget-grid" class=""> <div class="row"> <article class="col-sm-12 col-md-12 col-lg-6"> <!-- new widget --> <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-editbutton="false" data-widget-fullscreenbutton="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-comments txt-color-white"></i> </span> <h2> 搜索 </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <div> <label>Title:</label> <input type="text" /> </div> </div> <!-- end widget edit box --> <div class="widget-body widget-hide-overflow no-padding"> <!-- content goes here --> <!-- CHAT CONTAINER --> <div class="provinces" id="provinces" > <form class="form-inline"> <div class="form-group"> <select class="form-control" name="province_id"> <option value="0" selected>地区</option> {html_options options=$region} </select> </div> <div class="form-group"> <select class="form-control" name="attribute"> <option value="0" selected>高校属性</option> {html_options options=$standard} </select> </div> <div class="form-group"> <select class="form-control" name="subject"> <option value="0" selected>学科领域</option> {html_options options=$subjects} </select> </div> <button type="submit" class="btn btn-default">对比分析</button> </form> <div class="map-list" id="map-list"> {foreach from=$aProject key=key item=item} <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> {$key}({count($aProject[$key])}) </h3> </div> <div class="panel-body"> <div class="table-responsive"> <table id="" class="table table-striped table-bordered table-hover" width="100%"> <thead> <tr> <th width="">实验室名称</th> <th width="">依托单位</th> <th width="">省</th> <th width="">市</th> <th width="">高校属性</th> <th width="">所属领域</th> </tr> </thead> <tbody> {foreach from=$aProject[$key] key=keys item=items} <tr> <td>{$items.name}</td> <td>{$items.company}</td> <td>{$items.province_id}</td> <td>{$items.city_id}</td> <td>{$items.attribute}</td> <td>{$items.subject}</td> </tr> {foreachelse} <tr> <td colspan="7" style="height:100px; text-align:center; background:#fff;">没有相关数据</td> </tr> {/foreach} </tbody> </table> </div> </div> </div> {/foreach} <div class="col-xs-12 col-sm-6"> {$page_link} </div> </div> </div> </div> </div> <!-- end widget div --> </div> <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-editbutton="false" data-widget-fullscreenbutton="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-map-marker"></i> </span> <h2>地图信息</h2> <div class="widget-toolbar hidden-mobile"> <div class="widget-toolbar"> <!-- add: non-hidden - to disable auto hide --> <div class="btn-group"> <a class="btn btn-xs btn-success" href="javascript:location.reload()"> 刷新地图 <i class="fa fa-caret-down"></i> </a> </div> </div> </div> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <div> <label>Title:</label> <input type="text" /> </div> </div> <!-- end widget edit box --> <div class="widget-body no-padding"> <div id="containers" style="height: 700px;width: 575.5px;"></div> </div> </div> <!-- end widget div --> </div> <!-- end widget --> </article> <article class="col-sm-12 col-md-12 col-lg-6"> <!-- new widget --> <div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false" data-widget-editbutton="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-map-marker"></i> </span> <h2>地图信息</h2> <div class="widget-toolbar hidden-mobile"> <div class="widget-toolbar"> <!-- add: non-hidden - to disable auto hide --> <div class="btn-group"> <a class="btn btn-xs btn-success" href="javascript:location.reload()"> 刷新地图 <i class="fa fa-caret-down"></i> </a> </div> </div> </div> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <div> <label>Title:</label> <input type="text" /> </div> </div> <!-- end widget edit box --> <div class="widget-body no-padding"> <div id="container" style="height: 700px;width: 575.5px;"></div> </div> </div> <!-- end widget div --> </div> <!-- end widget --> </article> </div> <!-- end row --> </section>js部分
<script type="text/javascript"> {literal} var dom = document.getElementById("container"); var myChart = echarts.init(dom); function test_values() { var names=''; $.ajax({ url: "/map/laboratory", //要将此次请求提交到哪个服务端去 data: { }, //给服务端带的数据，可以没有，也可以多个 type: "post", //传递的方式 async: false, dataType: "json", //数据传递的格式 success: function (aaa) { //console.log(JSON.stringify(aaa)) //$("#provinces").val(aaa); names=aaa; //console.log(names); } }); return names; } function city_values(name) { var names=''; $.ajax({ url: "/map/laboratoryCity", //要将此次请求提交到哪个服务端去 data: {provinces:name}, //给服务端带的数据，可以没有，也可以多个 type: "post", //传递的方式 async: false, dataType: "json", //数据传递的格式 success: function (aaa) { //console.log(JSON.stringify(aaa)) //$("#provinces").val(aaa); names=aaa; //console.log(names); } }); return names; } var data=test_values(); //console.log(test_values()); var nameColor = " rgb(55, 75, 113)" var name_fontFamily = '等线' var subname_fontSize = 15 var name_fontSize = 18 var mapName = 'china' //对应的注册地图 var provinces = { //23个省 "台湾": "taiwan", "河北": "hebei", "山西": "shanxi", "辽宁": "liaoning", "吉林": "jilin", "黑龙江": "heilongjiang", "江苏": "jiangsu", "浙江": "zhejiang", "安徽": "anhui", "福建": "fujian", "江西": "jiangxi", "山东": "shandong", "河南": "henan", "湖北": "hubei", "湖南": "hunan", "广东": "guangdong", "海南": "hainan", "四川": "sichuan", "贵州": "guizhou", "云南": "yunnan", "陕西": "shanxi1", "甘肃": "gansu", "青海": "qinghai", //5个自治区 "新疆": "xinjiang", "广西": "guangxi", "内蒙古": "neimenggu", "宁夏": "ningxia", "西藏": "xizang", //4个直辖市 "北京": "beijing", "天津": "tianjin", "上海": "shanghai", "重庆": "chongqing", //2个特别行政区 "香港": "xianggang", "澳门": "aomen" }; //这是省市的数据地图 后面的提示框 这里后台显示 var geoCoordMap = {}; //这是点击气泡里面的数据显示 var geoprovinces = []; /*获取地图数据*/ myChart.showLoading(); var mapFeatures = echarts.getMap(mapName).geoJson.features; myChart.hideLoading(); mapFeatures.forEach(function(v) { // 地区名称 var name = v.properties.name; // 地区经纬度 geoCoordMap[name] = v.properties.cp; }); var max = 480, min = 9; // todo var maxSize4Pin = 100, minSize4Pin = 20; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), }); } } return res; }; var convertDataprovince = function(d) { var res = []; // if (d==null) { // alert("目前省份暂无实验室，请重新选择省市"); // } for (var i = 0; i < d.length; i++) { var geoCoord = geoprovinces[d[i].name]; if (geoCoord) { res.push({ name: d[i].name, value: geoCoord.concat(d[i].value), }); } } return res; }; readmaps('china', convertData(data)); //给地图添加点击事件 myChart.on('click', function(params) { //判断当前点击的事件是否有二级地图 if (params.name in provinces) { //获取地图的json数据 $.get('/app/static/2.0/js/map/' + provinces[params.name] + '.json', function(shengjson) { var dss=city_values(params.name); //注册地图 echarts.registerMap(params.name, shengjson); //数据组合 var d = []; for (var i = 0; i < shengjson.features.length; i++) { geoprovinces[shengjson.features[i].properties.name] = shengjson.features[i].properties.cp; d.push({ name: shengjson.features[i].properties.name, value: 0, }) } readmaps(params.name, convertDataprovince(dss),1); }); } }); //绘制地图 function readmaps(mapName, d,is_city=0) { //配置选项 option = { //标题 title: { text: mapName, link:'http://zfxm.zdsyz.org:8080/#/map/ditu', triggerEvent:true, target:'self', subtext: mapName + '地图', left: 'center', x: 'center', //标题样式 textStyle: { color: nameColor, //颜色 fontFamily: name_fontFamily, //字体 fontSize: name_fontSize //字体大小 }, //子标题样式 subtextStyle: { fontSize: subname_fontSize, fontFamily: name_fontFamily } }, toolbox:{ left:'20%', feature:{ myTool1: { show: true, title: '返回上一级', icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick: function (){ readmaps('china', convertData(data)); } }, } }, backgroundColor: 'rgba(147, 235, 248, .8)', tooltip: { triggerOn: 'click', enterable: true, formatter: function(params) { if (is_city==1) { var html=''; $.ajax({ url: "/map/laboratorylist", //要将此次请求提交到哪个服务端去 data: {city_id:params.value[3]}, //给服务端带的数据，可以没有，也可以多个 type: "post", //传递的方式 async: false, dataType: "json", //数据传递的格式 success: function (aaa) { html+='<div class="panel panel-default">'; html+='<div class="panel-heading">'; html+='<h3 class="panel-title">'; html+=aaa[0].province_id+'-'+aaa[0].city_id+',总数('+aaa.length+')'; html+='</h3></div>'; html+='<div class="panel-body">'; html+=' <div class="table-responsive"><table id="" class="table table-striped table-bordered table-hover" width="100%"><thead><tr><th width="">实验室名称</th><th width="">依托单位</th><th width="">省</th><th width="">市</th><th width="">高校属性</th><th width="">所属领域</th></tr></thead><tbody>'; for(var i=0;i<aaa.length;i++){ //console.log(aaa[i].name); html+='<tr>'; html+='<td>'+aaa[i].name+'</td>'; html+='<td>'+aaa[i].company+'</td>'; html+='<td>'+aaa[i].province_id+'</td>'; html+='<td>'+aaa[i].city_id+'</td>'; html+='<td>'+aaa[i].attribute+'</td>'; html+='<td>'+aaa[i].subject+'</td>'; html+='</tr>'; } html+=' </tbody></table></div>'; $("#map-list").html(html); } }); //html+='</div>'; //return html; } }, }, //地理坐标系组件(主要绘制散点图) geo: { show: true, map: mapName, zoom: 1.2, // left: 0, top: 0, right: 0, bottom: 0, // boundingCoords: [ // // 定位左上角经纬度 // [-180, 90], // // 定位右下角经纬度 // [180, -90] // ], label: { normal: { show: true }, emphasis: { show: false, } }, roam: true, itemStyle: { normal: { areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .5)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(255, 255, 255, .5)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: 'rgba(249,157,51, .9)', borderWidth: 0 } } }, series: [ { name: 'map', type: 'map', mapType: mapName, nameMap: { 'china': '中国' }, selectedMode: 'single', geoIndex: 0, label: { normal: { show: true, textStyle: { color: 'red' } }, emphasis: { show: true, textStyle: { color: '#fff' } } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: 'dodgerblue' }, emphasis: { areaColor: 'darkorange' } }, data: d }, { name: '点', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', //气泡 //symbolSize: [40, 50], //轴线两边的箭头的大小 label: { normal: { show: true, formatter: '{@[2]}', textStyle: { color: '#fff', fontSize: 9, } } }, itemStyle: { normal: { color: '#FF8C00', //标志颜色 } }, zlevel: 6, data: d, } ] }; myChart.setOption(option,true); } {/literal} </script>转载于:https://www.cnblogs.com/mengluo/p/11273993.html
相关资源：jquery echarts php实时动态图表显示