帝王谷资源网 Design By www.wdxyy.com
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息。ECharts官网提供了中国地图、世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图。
效果演示 源码下载
本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据。通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方面的相关知识。
HTML
首先在页面中需要加载地图的位置放上div#myChart。
<div id="myChart" style="width: 600px;height:400px;"></div> <script src="/UploadFiles/2021-04-02/echarts.min.js">然后是加载Echarts和中国地图js文件。由于本文实例中应用了异步ajax加载数据,所以需要加载jQuery库文件。
<script src="/UploadFiles/2021-04-02/echarts.min.js">Javascript
接下来js部分,先设置好Echarts选项内容,请看以下代码及注释。
option = { title : { text: '2015年GDP统计数据', subtext: '数据来源网络(单位:万亿元)', left: 'center' //标题居中 }, tooltip : { //提示工具, trigger: 'item', formatter: "{a} <br/>{b} : {c}万亿元" }, visualMap: { //视觉映射组件,可以根据范围调节数据变化 min: 0, //最小值 max: 10, //最大值 left: 'left', //位置 top: 'bottom', orient: 'horizontal', //水平 text:['高','低'], // 文本,默认为数值文本 calculable : true //是否启用值域漫游,即是否有拖拽用的手柄,以及用手柄调整选中范围。 }, toolbox: { //工具栏 show: true, orient : 'vertical', //垂直 left: 'right', top: 'center', feature : { mark : {show: true}, saveAsImage : {show: true} //保存为图片 } }, series : [ { name: '2015年GDP', type: 'map', mapType: 'china', //使用中国地图 roam: false, //是否开启鼠标缩放和平移 itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[] } ] }; var myChart = echarts.init(document.getElementById('myChart')); myChart.showLoading(); //预加载动画 myChart.setOption(option); //渲染地图然后我们使用jQuery的Ajax()来异步请求数据。
$.ajax({ type: "post", async: false, //同步执行 url: "mapdata.php", dataType: "json", //返回数据形式为json success: function(result) { myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //渲染数据 series: [{ // 根据名字对应到相应的系列 name: '2015年GDP', data: result }] }); }, error: function() { alert("请求数据失败!"); } });很显然,我们看到通过jQuery的$.ajax()向mapdata.php发送了一个post请求,要求返回json格式的数据,当请求成功并得到回应时,重新渲染地图数据。
PHP
mapdata.php的任务是读取mysql数据表中的数据,然后返回给前端。首先是要连接数据库,这部分代码在connect.php中,请下载源码查看。然后就是sql查询,读取表echarts_map中的数据,最后以json格式返回。
include_once('connect.php'); //连接数据库 //查询数据 $sql = "select * from echarts_map"; $query = mysql_query($sql); while($row=mysql_fetch_array($query)){ $arr[] = array( 'name' => $row['province'], 'value' => $row['gdp'] ); } mysql_close($link); echo json_encode($arr); //输出json格式数据MySQL
最后提供mysql数据表结构信息,数据信息可以下载源码后,将sql导入你的mysql中即可,注意演示时修改connect.php的数据库配置信息。
CREATE TABLE IF NOT EXISTS `echarts_map` ( `id` int(10) NOT NULL AUTO_INCREMENT, `province` varchar(30) NOT NULL, `gdp` decimal(10,2) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月25日
2024年10月25日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]