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中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
随机推荐
- 解决mybatis-plus更新数据的时候，有值为空导致更新失败的问题
问题 在用mybatis-plus更新数据的时候,更新失败,错误信息如下: Cause: org.apache.ibatis.type.TypeException: Could not set par ...
- vue项目打包-2-九五小庞
vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...
- K8S基础
四组基本概念 Pod/Pod控制器 Name/Namespace Label/Label选择器 Service/Ingress Pod Pod是k8s里能够被运行的最小的逻辑单元(原子单元) 1个Po ...
- 发布MeteoInfo 1.2.6
增加了对AWX卫星数据格式的支持(和C#版本的功能相当).在MeteoInfo中打开AWX数据: 在MeteoInfoLab中打开AWX数据:
- Android开发还不会这些？如何面试拿高薪！
我所接触的Android开发者,百分之九十五以上 都遇到了以下几点致命弱点! 如果这些问题也是阻止你升职加薪,跳槽大厂的阻碍. 那么我确信可以帮你突破瓶颈! 群内有许多来自一线的技术大牛,也有在小厂或 ...
- centos8上安装openresty
一,openresty的官网地址: http://openresty.org/ 说明:说一下openresty的安装方式: 从openresty的安装目录下,可以看到openresty编译安装了自己作 ...
- Linux中创建自己的欢迎登陆界面
/etc 在Linux中相当于Windows的注册表 修改其中文件可以影响整个Linux系统 MOTD motd:message of the day /etc/motd /etc/motd文件作用是 ...
- Luogu-2480 古代猪文
我们首先来概括一下题意,其实就是给定 \(n,g\),求: \[g^{\sum_{k\nmid n} C_n^{\frac{n}{k}}}\operatorname{mod} 999911659 \] ...
- pip安装与使用
介绍 pip是python包管理工具,提供了对python包的查找,下载,安装,卸载功能. 安装 检查是否安装 pip --version 安装 curl https://bootstrap.pypa ...
- 基于node.js的爬虫框架 node-crawler简单尝试
百度爬虫这个词语,一般出现的都是python相关的资料. py也有很多爬虫框架,比如scrapy,Portia,Crawley等. 之前我个人更喜欢用C#做爬虫. 随着对nodejs的熟悉.发现做这种 ...