ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)

36大數(shù)據(jù) ? 7年前掃碼分享

我是創(chuàng)始人李巖：很抱歉！給自己產(chǎn)品做個(gè)廣告，點(diǎn)擊進(jìn)來(lái)看看。

作者：菩提樹(shù)下的煮茶小童子

最近要將后臺(tái)數(shù)據(jù)庫(kù)上的一些數(shù)據(jù)以可視化的方法顯示到前端，找來(lái)找去，發(fā)現(xiàn)百度開(kāi)發(fā)的這套圖表工具庫(kù)還不錯(cuò)，網(wǎng)上搜索了一下相關(guān)的教程，也算是實(shí)現(xiàn)了較為簡(jiǎn)單的demo。于是寫(xiě)下來(lái)，記錄一下。

ECharts

ECharts是國(guó)人開(kāi)發(fā)的一套前端的圖表工具庫(kù)，使用起來(lái)超方便，也很簡(jiǎn)單（當(dāng)然了，前提是理解了其工作原理之后）。

下面簡(jiǎn)單的介紹一下，如何在項(xiàng)目中使用ECharts。

下載js代碼

下載地址： http://echarts.baidu.com/

個(gè)人覺(jué)得，開(kāi)發(fā)人員下載完整版會(huì)比較好一點(diǎn)。而且官方建議的也是下載完整版。

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)

下載Echarts

博主這里下載的是完整版，大約不到2M。

工作原理淺析

其實(shí)仔細(xì)的想想，ECharts的工作就是在網(wǎng)頁(yè)上顯示了一張?zhí)厥獾膱D片嘛。所以我們需要意識(shí)到，需要給“圖片”一個(gè)一個(gè)空間，這樣才會(huì)有圖表的安家之所嘛。

然后空間有了，也就是有地皮了。要蓋一個(gè)房子的話，必須得有框架不是。這樣的往上面添加些磚瓦水泥什么的才能將房子蓋起來(lái)。同樣的，ECharts也是這么個(gè)原理。但是這個(gè)“骨架”叫Option。至于這個(gè)option需要怎么設(shè)置，官網(wǎng)上有詳細(xì)的介紹，博主就不再這里重復(fù)的造輪子了。大家有興趣的可以到下圖展示的地方去學(xué)習(xí)。

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)
ECharts3下載

在項(xiàng)目中引入ECharts

如題，本小節(jié)就是大致的講一下如何簡(jiǎn)單的使用這個(gè)圖標(biāo)庫(kù)。
不妨看一下下面的代碼：

				<!DOCTYPE html>
				<html>
				<head>
				<meta charset="UTF-8">
				<title>入門(mén)</title>
				<script src="../static/js/echarts.js"></script>
				<script src="../static/js/sleeplib.js"></script>
				</head>
				<body>
				<h1>開(kāi)始測(cè)試</h1>
				<hr>
				<!-- 先準(zhǔn)備一個(gè)用于盛放圖表的容器 -->
				//通過(guò) echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過(guò) setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖
				//基于準(zhǔn)備好的DOM，實(shí)例化echarts實(shí)例
				var myChart = echarts.init(document.getElementById("container"));
				// 指定圖表的配置項(xiàng)和數(shù)據(jù)
				var option1 = {
				title : {
				text : 'ECharts 入門(mén)案例'
				},
				tooltip : {
				text : '鼠標(biāo)放上去之后的懸浮提示語(yǔ)句！'
				},
				legend : {
				data : [ '銷(xiāo)量' ]
				},
				xAxis : {
				data : [ '襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子', '內(nèi)褲' ]
				},
				yAxis : {},
				series : [ {
				name : '銷(xiāo)量',
				type : 'bar',
				data : [ 7, 20, 36, 10, 10, 20, 28 ]
				} ]
				};
				// 使用上面的配置項(xiàng)作為參數(shù)，傳給echart來(lái)顯示
				myChart.setOption(option1);
				</script>
				</body>
				</html>

關(guān)鍵在于最后一句：

myChart.setOption(option1);

起作用不言而喻了吧。那么，得到的效果是什么呢？如下圖：

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)
Tutorial測(cè)試

另外手動(dòng)的點(diǎn)擊上面的那個(gè)legend為“銷(xiāo)量”的小紅色的矩形，會(huì)有驚喜的喲。

<marquee><font color=”green” size=’6′>接下來(lái)開(kāi)始進(jìn)入今天的正題</font></marquee>

后臺(tái)處理

后臺(tái)處理包括使用PHP查詢數(shù)據(jù)庫(kù)，然后以數(shù)組的形式返回，再由JQuery以Ajax的形式獲取數(shù)據(jù)，交給前端進(jìn)行顯示的過(guò)程。

數(shù)據(jù)庫(kù)端MySQL

數(shù)據(jù)是核心，所以建庫(kù)很重要。這里僅僅是為了演示，所以數(shù)據(jù)庫(kù)建的很簡(jiǎn)單，如下圖：

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)

建立數(shù)據(jù)庫(kù)

PHP端

需要注意的是，數(shù)據(jù)庫(kù)端返回的時(shí)候必須是JSON類(lèi)型，這樣才可以被ajax處理的更方便。

				<?php
				header("Content-type=text/json;charset=UTF-8");
				$conn = mysql_connect("localhost", "root", "mysql") or die("連接數(shù)據(jù)庫(kù)的過(guò)程失敗！");
				mysql_query("set names utf-8");
				mysql_select_db("test");
				$resultset = mysql_query("select name, age  from echartsuser", $conn);
				////////////////////////////////////////////////準(zhǔn)備數(shù)據(jù)進(jìn)行裝填
				$data = array();
				////////////////////////////////////////////////實(shí)體類(lèi)
				class User{
				public $username;
				public $age;
				}
				////////////////////////////////////////////////處理
				while($row = mysql_fetch_array($resultset, MYSQL_ASSOC)) {
				$user = new User();
				$user->username = $row['name'];
				$user->age = $row['age'];
				$data[] = $user;
				}
				$conn.close();
				// 返回JSON類(lèi)型的數(shù)據(jù)
				echo json_encode($data);

那么驗(yàn)證返回的數(shù)據(jù)類(lèi)型到底是不是JSON，我們只需要做下接口測(cè)試即可。博主使用的是Chrome瀏覽器，裝了一個(gè)JSON的插件，所以可以很方便的檢測(cè)。如下圖：

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)
JSON接口測(cè)試

JQuery & Ajax處理

JQuery真的是難的的一個(gè)函數(shù)工具庫(kù)，因此使用JQuery處理起來(lái)ajax請(qǐng)求會(huì)降低代碼編寫(xiě)的復(fù)雜度，其底層將自動(dòng)的處理兼容性問(wèn)題。這很GEEK。

本例，目的很明確，獲取剛才的數(shù)據(jù)接口內(nèi)的數(shù)據(jù)。所以代碼很簡(jiǎn)單，如下：

				// 初始化兩個(gè)數(shù)組，盛裝從數(shù)據(jù)庫(kù)中獲取到的數(shù)據(jù)
				var names = [], ages = [];
				//調(diào)用ajax來(lái)實(shí)現(xiàn)異步的加載數(shù)據(jù)
				function getusers() {
				$.ajax({
				type: "post",
				async: false,
				url: "../app/getuser.php",
				data: {},
				dataType: "json",
				success: function(result){
				if(result){
				for(var i = 0 ; i < result.length; i++){
				names.push(result[i].username);
				ages.push(result[i].age);
				}
				}
				},
				error: function(errmsg) {
				alert("Ajax獲取服務(wù)器數(shù)據(jù)出錯(cuò)了！"+ errmsg);
				}
				});
				return names, ages;
				}
				// 執(zhí)行異步請(qǐng)求
				getusers();

ECharts 端處理

現(xiàn)在“萬(wàn)事俱備，只欠東風(fēng)”了，數(shù)據(jù)都已經(jīng)有了，剩下的就是如何顯示它們了。按照一開(kāi)始博主的蓋房子理論，下面就把骨架搭起來(lái)吧。

				// 初始化 圖表對(duì)象
				var mychart = echarts.init(document.getElementById("container"));
				// 進(jìn)行相關(guān)項(xiàng)的設(shè)置，也就是所謂的搭搭骨架，方便待會(huì)的ajax異步的數(shù)據(jù)填充
				var option = {
				title : {
				text : '姓名年齡分布圖'
				},
				tooltip : {
				show : true
				},
				legend : {
				data : [ 'age' ]
				},
				xAxis : [ {
				data : names
				} ],
				yAxis : [ {
				type : 'value'
				} ],
				series : [ {
				"name" : "age",
				"type" : "bar",
				"data" : ages
				} ]
				};
				// 將配置項(xiàng)賦給chart對(duì)象，來(lái)顯示相關(guān)的數(shù)據(jù)
				mychart.setOption(option);

注意xAxis: 里面的names,和series里面的ages就是之前JQuery使用ajax方式獲取到的數(shù)據(jù)啦。

前端全部代碼

個(gè)人覺(jué)得有個(gè)完整的代碼會(huì)給人不少的啟發(fā)，那么這里還是貼出前端交互的代碼吧，也方便大家查看。

				<!DOCTYPE html>
				<html>
				<head>
				<meta charset="UTF-8">
				<title>JQuery Ajax Test</title>
				<script src="../static/js/echarts.js"></script>
				<script src="../static/js/jquery-1.11.1.min.js"></script>
				</head>
				<body>
				<h1>PHP Ajax ECahrts 測(cè)試</h1>
				<hr>
				// 初始化兩個(gè)數(shù)組，盛裝從數(shù)據(jù)庫(kù)中獲取到的數(shù)據(jù)
				var names = [], ages = [];
				//調(diào)用ajax來(lái)實(shí)現(xiàn)異步的加載數(shù)據(jù)
				function getusers() {
				$.ajax({
				type: "post",
				async: false,
				url: "../app/getuser.php",
				data: {},
				dataType: "json",
				success: function(result){
				if(result){
				for(var i = 0 ; i < result.length; i++){
				names.push(result[i].username);
				ages.push(result[i].age);
				}
				}
				},
				error: function(errmsg) {
				alert("Ajax獲取服務(wù)器數(shù)據(jù)出錯(cuò)了！"+ errmsg);
				}
				});
				return names, ages;
				}
				// 執(zhí)行異步請(qǐng)求
				getusers();
				// 初始化 圖表對(duì)象
				var mychart = echarts.init(document.getElementById("container"));
				// 進(jìn)行相關(guān)項(xiàng)的設(shè)置，也就是所謂的搭搭骨架，方便待會(huì)的ajax異步的數(shù)據(jù)填充
				var option = {
				title : {
				text : '姓名年齡分布圖'
				},
				tooltip : {
				show : true
				},
				legend : {
				data : [ 'age' ]
				},
				xAxis : [ {
				data : names
				} ],
				yAxis : [ {
				type : 'value'
				} ],
				series : [ {
				"name" : "age",
				"type" : "bar",
				"data" : ages
				} ]
				};
				// 將配置項(xiàng)賦給chart對(duì)象，來(lái)顯示相關(guān)的數(shù)據(jù)
				mychart.setOption(option);
				</script>
				<marquee>確認(rèn)可以到達(dá)這里啊</marquee>
				</body>
				</html>

演示結(jié)果

至此，編碼任務(wù)就算完成了。那么迫不及待的來(lái)看看效果吧。

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)

效果演示圖

那么，稍微的修改一下數(shù)據(jù)，再來(lái)看看結(jié)果會(huì)怎樣，刷新之后如下圖：

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)

修改完數(shù)據(jù)

ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化-36大數(shù)據(jù)

更新之后的數(shù)據(jù)

總結(jié)

最后來(lái)回顧一下，本次試驗(yàn)的收獲。其實(shí)也就是對(duì)于ECharts的一個(gè)比較“全棧”（請(qǐng)?jiān)试S我用了這么個(gè)不太恰當(dāng)?shù)脑~ O(∩_∩)O ）。比較簡(jiǎn)單的實(shí)現(xiàn)了后端以及前端的數(shù)據(jù)可視化顯示的一個(gè)流程。

用到的技術(shù)也都是很大眾化的了，當(dāng)然后端不僅可以由PHP來(lái)完成，JAVA，Python，Golang等等都是可以的，只是使用PHP比較方便罷了。只要可以根據(jù)這個(gè)接口獲取到想要的數(shù)據(jù)就行。

End.

轉(zhuǎn)載請(qǐng)注明來(lái)自36大數(shù)據(jù)（36dsj.com)： 36大數(shù)據(jù) ? ECharts, PHP, MySQL, Ajax, JQuery 實(shí)現(xiàn)前后端數(shù)據(jù)可視化