echarts and combine php
According php background data mapped to all the provinces on the map, map of the city in the form of lower drill, drill down to each new map does not merge (merger scaling it will lead to the next drill location map can not find it), add a custom toolbar Maps inside the drill return to the top level next
Page section
<!-- 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 part
<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>