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 = 15var name_fontSize = 18var 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>
转载于:https://www.cnblogs.com/mengluo/p/11273993.html
php数据映射到echarts中国地图相关推荐
- HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
- Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
- Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
- 【echarts 中国地图射线版本】vue实现中国地图航线动画效果,地图上添加散点效果【详细注释,通俗易懂】
先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
- Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言 最近其实一直在用Echa ...
- VUE 中实现echarts中国地图 人口迁徙
VUE 中实现echarts中国地图 人口迁徙 效果图: 安装Echarts依赖 要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
- 【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线 最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...
- Echarts中国地图修改
前言 在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图 地图样式修改 标题修改 数值功能删除,但保留数据计算 按钮功能去除 地图 ...
- echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来 先注册地图 import * as echarts from 'echarts'; import { d ...
最新文章
- 爬一爬 iPhone 11为何嘴上说真丑,销量却真香?
- 用户画像技术及方法论
- 近世代数--群同构--第一同构定理
- 美女同事DL-624+A家庭办公无线路由的解决方案!
- commons-lang3工具类学习(三)
- js时间延迟执行函数
- 手机MODEM开发(31)---LTE 速率低
- xp无法使用计算机管理员权限,xp无法无法使用管理员权限运行软件的解决步骤...
- python创建自定义函数is_number()来判断一个字符是否是数字
- 工艺仿真软件_中科院科研项目:算法与软件工程集成电路制造中的工艺仿真
- [ACM] hdu 2082 找单词 (母函数)
- 保密工作中非密计算机工具检查,【保密知识】别在保密工作面前耍“小聪明”哦~...
- windows+Ubuntu双系统引导修复(终极版)
- 设计模式之抽象工厂模式(Abstract Factory)
- java available_关于InputStream类的available()方法
- minmax()函数
- VoIP的落地通信模型和要考虑几个大的方面问题及基本概念和交互流程整理
- 无人出租车江湖:百度出击,安途并进
- Android 高级UI解密 (三) :Canvas裁剪 与 二维、三维Camera几何变换(图层Layer原理)
- 0725(016天 多态复习 java中级-抽象类01)
热门文章
- UE4 /UE5 PC/安卓优化
- Hyperf 初体验-ab压测
- 原型设计工具 - Mockplus
- WebSocket和socket介绍
- 梁斌penny_Penny Pinching in the Cloud:如何以10美元的价格运行为期两天的虚拟会议
- 【NOIP2013模拟10.23】君と彼女の恋
- Python: pycharm debug调试点击结束断点报错KeyboardInterrupt
- 运用计算机辅助设计的药物实例,计算机辅助设计在药物研发中的应用现状探究...
- led trigger
- 设备如何使用go sdk轻松连接华为云IoT平台