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>
php数据映射到echarts中国地图的更多相关文章
- vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
- echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
- echarts中国地图
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...
- echarts 中国地图 数据自动提示
mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- echarts 中国地图标注所在点
达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...
- Echarts 中国地图(包括china.js文件)
用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
- 使用echarts简单制作中国地图，echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
随机推荐
- 「剑指offer」27道Mybatis面试题含解析
1.什么是Mybatis? Mybatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,开发时只需要关注SQL语句本身,不需要花费精力去处理加载驱动.创建连接.创建statement等繁杂 ...
- 日常使用 ADB 命令
最近项目中经常与安卓设备相连,用到adb命令.整理一下常用命令. wifi控制命令 adb connect IP 若连接失败,可尝试插数据线运行以下两条命令后,方可拔掉数据线,在设备未关闭之前可以直接 ...
- angularCroppie
下载 angularCroppieangularCroppie 图像Cropper使用Croppie 安装 Npm: Npm安装角croppie 使用 添加依赖项:angular.模块("m ...
- 17.JAVA-常用总结
for另一种写法 for(UserBean bean : list){ //for循环取出list中每个成员,并赋给bean变量 System.out.println(bean.getName()); ...
- org.apache.ibatis.ognl.OgnlException: source is null for getProperty(null, "enterpCd")-Mybatis报错
一.问题由来 下午快要下班时,登录测试服务器查看日志信息,看看有没有新的异常信息,如果有的话好及时修改.结果一看果然有新的异常信息. 主要的异常信息如下: 2020-10-13 14:51:03,03 ...
- 对NETIF_F_GSO的一些理解
看linux内核协议栈的时候看到tcp_sendmsg函数,看起来并不难理解,但是申请skb的时候主buff大小让我很困惑.我以前一直以为会根据sack/ip option/pmtu等计算一个mss, ...
- 多测师肖sir_pdf转word方法
1.百度搜索 my love pdf 在线转换 2.输入wps 下载软件
- 慕课网go语言体系课抢先体验
慕课网go语言体系课抢先体验,课程分四个阶段: <第一阶段go语言基础语法篇>,从go语言基础语法篇讲起,go语言环境集成,常用开发工具集成,常用数据类型讲解,流程控制,函数,结构体,方法 ...
- 题解：SDOI2017 新生舞会
题解:SDOI2017 新生舞会 Description 学校组织了一次新生舞会,Cathy 作为经验丰富的老学姐,负责为同学们安排舞伴. 有 \(n\) 个男生和 \(n\) 个女生参加舞会.一个男 ...
- day43 Pyhton 并发编程06
一.内容回顾 线程 锁 为什么有了GIL之后还需要锁 多个线程同时操作全局变量还需要锁 当出现'非原子性操作',例如+= -= *= /= l.append(l) 原子性操作 a += 1 a= a ...