如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
ECharts地圖主要用于地理區(qū)域數(shù)據(jù)的可視化,展示不同區(qū)域的數(shù)據(jù)分布信息。ECharts官網(wǎng)提供了中國地圖、世界地圖等地圖數(shù)據(jù)下載,通過js引入或異步加載json文件的形式調(diào)用地圖。
本文將結(jié)合實(shí)例講解如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù),我們以中國地圖為例,展示去年(2015年)我國各省份GDP數(shù)據(jù)。通過異步請求php,讀取mysql中的數(shù)據(jù),然后展示在地圖上,因此本文除了你掌握前端知識外,還需要你了解PHP以及MySQL方面的相關(guān)知識。
HTML
首先在頁面中需要加載地圖的位置放上div#myChart。
<div id="myChart" style="width: 600px;height:400px;"></div> <script src="echarts.min.js"></script>
然后是加載Echarts和中國地圖js文件。由于本文實(shí)例中應(yīng)用了異步ajax加載數(shù)據(jù),所以需要加載jQuery庫文件。
<script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script src="js/jquery.min.js"></script>
Javascript
接下來js部分,先設(shè)置好Echarts選項內(nèi)容,請看以下代碼及注釋。
option = { title : { text: '2015年GDP統(tǒng)計數(shù)據(jù)', subtext: '數(shù)據(jù)來源網(wǎng)絡(luò)(單位:萬億元)', left: 'center' //標(biāo)題居中 }, tooltip : { //提示工具, trigger: 'item', formatter: "{a} <br/> : {c}萬億元" }, visualMap: { //視覺映射組件,可以根據(jù)范圍調(diào)節(jié)數(shù)據(jù)變化 min: 0, //最小值 max: 10, //最大值 left: 'left', //位置 top: 'bottom', orient: 'horizontal', //水平 text:['高','低'], // 文本,默認(rèn)為數(shù)值文本 calculable : true //是否啟用值域漫游,即是否有拖拽用的手柄,以及用手柄調(diào)整選中范圍。 }, 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, //是否開啟鼠標(biāo)縮放和平移 itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[] } ] }; var myChart = echarts.init(document.getElementById('myChart')); myChart.showLoading(); //預(yù)加載動畫 myChart.setOption(option); //渲染地圖
然后我們使用jQuery的Ajax()來異步請求數(shù)據(jù)。
$.ajax({ type: "post", async: false, //同步執(zhí)行 url: "mapdata.php", dataType: "json", //返回數(shù)據(jù)形式為json success: function(result) { myChart.hideLoading(); //隱藏加載動畫 myChart.setOption({ //渲染數(shù)據(jù) series: [{ // 根據(jù)名字對應(yīng)到相應(yīng)的系列 name: '2015年GDP', data: result }] }); }, error: function() { alert("請求數(shù)據(jù)失敗!"); } });
很顯然,我們看到通過jQuery的$.ajax()向mapdata.php發(fā)送了一個post請求,要求返回json格式的數(shù)據(jù),當(dāng)請求成功并得到回應(yīng)時,重新渲染地圖數(shù)據(jù)。
PHP
mapdata.php的任務(wù)是讀取mysql數(shù)據(jù)表中的數(shù)據(jù),然后返回給前端。首先是要連接數(shù)據(jù)庫,這部分代碼在connect.php中,請下載源碼查看。然后就是sql查詢,讀取表echarts_map中的數(shù)據(jù),最后以json格式返回。
include_once('connect.php'); //連接數(shù)據(jù)庫 //查詢數(shù)據(jù) $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格式數(shù)據(jù)
MySQL
最后提供mysql數(shù)據(jù)表結(jié)構(gòu)信息,數(shù)據(jù)信息可以下載源碼后,將sql導(dǎo)入你的mysql中即可,注意演示時修改connect.php的數(shù)據(jù)庫配置信息。
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;
- jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
- jQuery插件Echarts實(shí)現(xiàn)的漸變色柱狀圖
- jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
- jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
- jQuery插件echarts實(shí)現(xiàn)的單折線圖效果示例【附demo源碼下載】
- jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果示例【附demo源碼下載】
- jQuery插件echarts實(shí)現(xiàn)的循環(huán)生成圖效果示例【附demo源碼下載】
- jQuery插件echarts去掉垂直網(wǎng)格線用法示例
- HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題
- jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果示例【附demo源碼下載】
- jquery使用echarts實(shí)現(xiàn)有向圖可視化功能示例
相關(guān)文章
基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動完成功能
自動完成功能是指:類似百度搜索之類的輸入一個詞的一部分后就自動提示,然后用戶可以選擇,不需要再輸入剩余部分。2011-08-08jQuery實(shí)現(xiàn)帶滾動線條導(dǎo)航效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶滾動線條導(dǎo)航效果的方法,分析了帶滾動條導(dǎo)航效果的實(shí)現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01jquery 顯示*天*時*分*秒實(shí)現(xiàn)時間計時器
用jquery實(shí)現(xiàn)時間計時器,從之前的某個時間段到現(xiàn)在距離多少天多少時多少分多少秒,示例代碼如下,大家拷貝即可使用2014-05-05jQuery實(shí)現(xiàn)強(qiáng)制cookie過期方法匯總
本文是對jquery 強(qiáng)制cookie失效的解決方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2015-05-05Jquery增加鼠標(biāo)中間功能mousewheel的實(shí)例代碼
這篇文章介紹了Jquery增加鼠標(biāo)中間功能mousewheel的實(shí)例代碼,有需要的朋友可以參考一下2013-09-09jQuery實(shí)現(xiàn)ajax無刷新分頁頁碼控件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax無刷新分頁頁碼控件,需要的朋友可以參考下2017-02-02