php数据映射到echarts中国地图
echarts和php结合
根据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>
