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中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
随机推荐
- Java安全之Commons Collections1分析（一）
Java安全之Commons Collections1分析(一) 0x00 前言 在CC链中,其实具体执行过程还是比较复杂的.建议调试前先将一些前置知识的基础给看一遍. Java安全之Commons ...
- [学习笔记] Treap
想必大家都知道一种叫做二叉搜索树这东西吧,那么我们知道,在某些特殊情况下,二叉搜索树会退化成一条链,而且如果出题人成心想卡你的话也很简单,分分钟把你(n log n)的期望卡成.那么我们该如何避免这种 ...
- Vue结合Django-Rest-Frameword结合实现登录认证（二）
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 微信公众 ...
- android的adb命令整理
adb.exe的路径在Android\Sdk\platform-tools 把这个路径加入到系统的path环境下. 先用usb连接设备,比如一台android手机 adb tcpip 5555 adb ...
- 【转】Linux-CentOS7设置程序开启自启步骤！
链接:https://blog.csdn.net/wang123459/article/details/79063703
- day34 Pyhton 网络编程
一今日内容 # 函数 # 面向对象 # 进阶 # 网络编程 4 # 并发编程 6-7 # 概念 # 网络基础 # 局域网的概念 # 交换机和路由器的工作流程 # ip地址 # mac地址 # 子网掩码 ...
- ABAP 7.55 新特性 （一）
最近几天,SAP S4 2020对应的ABAP 7.55的新版文档已经出现.本文翻译了ABAP SQL之外的更新部分.ABAP SQL的更新比较长,会再之后单独成篇. 译者水平有限,如有错误,请评论指 ...
- goland 2020 去除形参提醒
IDEA依次打开File→settings → Editor →Inlay Hints →java ,根据个人喜好 在 Show parameter name hints 选项中灵活配置即可.新版对该 ...
- 第三十二章 Linux常规练习题（一）
一.练习题一 1.超级用户(管理员用户)提示符是____,普通用户提示符是____.2.linux关机重启的命令有哪些 ?3.bash是什么?4.bash特性, 常见的bash特性有哪些?5.网卡的配 ...
- MongoDB添加认证
创建用户管理员 在admin数据库中,添加具有该userAdminAnyDatabase角色的用户 .根据需要为此用户添加其他角色. 注意:创建用户的数据库(在此示例中为 admin)是用户的身份验证 ...