[Echarts視覺化] 二.php和ajax連線資料庫實現動態資料視覺化

Eastmount發表於2017-06-02
Echarts視覺化PHP資料庫
前一篇文章 "[Echarts視覺化] 一.入門篇之簡單繪製中國地圖和貴州地區" 主要是通過Echarts視覺化介紹入門知識、中國地圖和貴州地區各省份的資料分析，其中貴州地圖才是它的核心內容。
這篇文章主要結合PHP、MySQL、JQuery和Ajax從資料庫中獲取資料，動態的顯示值，這是實現真正視覺化的技術入，可以應用於實際的專案中。基礎性文章，希望對您有所幫助，如果文章中存在不足之處，還請海涵~

參考文章：ECharts, PHP, MySQL, Ajax, JQuery 實現前後端資料視覺化
          echarts+php+mysql 繪圖例項 - 謙一
          PHP+echarts讀取地圖資料

該篇文章程式碼下載地址：




一. 回顧Echarts繪製直方圖

Echarts官網地址：http://echarts.baidu.com/index.html
注意：基礎知識參考前一篇文章，這篇文章主要是程式碼為主，整個流程都是詳細的。同時發現，準備寫這篇文章的時候，“純臻”大神也寫了篇類似的，但依然有不同的地方可能對你有所幫助。
Echarts程式碼 test01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和資料
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['數量']
            },
            xAxis: {
                data: ["貴陽市","遵義市","凱裡市","六盤水市","都勻市","畢節市"]
            },
            yAxis: {},
            series: [{
                name: '數量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
執行結果如下圖所示：



二. 建立資料庫

建立資料庫hcpmanage，再建立表guizhou，包括序號、地名、數量三個欄位。
如下所示：

SQL語句對應的程式碼：

-- ----------------------------
-- Table structure for `guizhou`
-- ----------------------------
DROP TABLE IF EXISTS `guizhou`;
CREATE TABLE `guizhou` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `place` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `num` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- ----------------------------
-- Records of guizhou
-- ----------------------------
INSERT INTO `guizhou` VALUES ('1', '貴陽市', '5');
INSERT INTO `guizhou` VALUES ('2', '遵義市', '20');
INSERT INTO `guizhou` VALUES ('3', '凱裡市', '36');
INSERT INTO `guizhou` VALUES ('4', '六盤水市', '10');
INSERT INTO `guizhou` VALUES ('5', '都勻市', '10');
INSERT INTO `guizhou` VALUES ('6', '畢節市', '20');


三. PHP連線資料庫及Json傳值

PHP連線資料庫的核心程式碼大家非常熟悉了，下面這段程式碼簡單包括了Json取值。
sql.php檔案：

<?php
	//PHP連線資料庫 
	header("content-type:text/json;charset=utf-8");
	//連結資料庫
	$con = mysql_connect("localhost", "root", "123456"); 
	if (!$con) 
	{ 
		die('Could not connect database: ' . mysql_error()); 
	} 

	//選擇資料庫
	$db_selected = mysql_select_db("hcpmanage", $con); 
	if (!$db_selected) 
	{ 
	 	die ("Can\'t use yxz : " . mysql_error()); 
	} 

	//執行MySQL查詢-設定UTF8格式
	mysql_query("SET NAMES utf8"); 	

	//查詢學生資訊
	$sql = "SELECT * FROM `guizhou` ";
	$result = mysql_query($sql,$con); 

	//定義變數json儲存值
	$data="";
	$array= array();
	class GuiZhou{
		public $id;
	    public $place;
	    public $num;
	}

	while ($row = mysql_fetch_row($result))
	{ 
		list($id,$place,$num) = $row;   
  	
  		/*
		echo $id.' ';
		echo $place.' ';
		echo $num;
		echo '<br >';
		*/
		$gz = new GuiZhou();
		$gz->id = $id;
		$gz->place = $place;
		$gz->num = $num;

		//陣列賦值
		$array[] = $gz;
	}

	$data = json_encode($array);
	echo $data;
	//{"id":"1","place":"\u8d35\u9633\u5e02","num":"5"}

?>
核心程式碼，通過array陣列獲取Guizhou類中的值，該值是讀取資料庫並且賦值給例項gz的，再呼叫json_encode($array)進行格式轉換。輸出結果如下所示，也可以Json只獲取兩個值。


注意訪問地址為：http://localhost:8080/20170224YXZ/sql.php，檔案放到Apache的htdocs目錄下。所有檔案如下圖所示：




四. Ajax動態實現Echarts視覺化

test02.html程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        // 初始化兩個陣列，盛裝從資料庫中獲取到的資料
        var places=[], nums=[];
        function TestAjax(){
            $.ajax({
                type: "post",
                async: false,     //非同步執行
                url: "sql.php",   //SQL資料庫檔案
                data: {},         //傳送給資料庫的資料
                dataType: "json", //json型別
                success: function(result) {
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            places.push(result[i].place);
                            nums.push(result[i].num);
                            console.log(result[i].place);
                            console.log(result[i].num);
                        }
                    }
                }
            })
            return places, nums;
        }

        //執行非同步請求
        TestAjax();

        // 指定圖表的配置項和資料
        var option = {
            title: {
                text: 'ECharts+Ajax+MySQL+PHP'
            },
            tooltip: {
                show : true
            },
            legend: {
                data:['數量']
            },
            xAxis: [{
                //data: ["貴陽市","遵義市","凱裡市","六盤水市","都勻市","畢節市"]
                type : 'category',
                data : places
            }],
            yAxis: {
                type : 'value'
            },
            series: [{
                name : "數量",
                type : "bar",
                data : nums
            }]
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
    <marquee>Eastmount 璋 love 娜!!!</marquee>
</body>
</html>
執行結果如下圖所示，這是動態呼叫的視覺化結果。


其中Ajax核心程式碼為：

     var places=[], nums=[];
        function TestAjax(){
            $.ajax({
                type: "post",
                async: false,     //非同步執行
                url: "sql.php",   //SQL資料庫檔案
                data: {},         //傳送給資料庫的資料
                dataType: "json", //json型別
                success: function(result) {
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            places.push(result[i].place);
                            nums.push(result[i].num);
                            console.log(result[i].place);
                            console.log(result[i].num);
                        }
                    }
                }
            })
            return places, nums;
        }
        //執行非同步請求
        TestAjax();
同時，瀏覽器中檢查元素可以對Ajax的值進行測試輸出，呼叫console.log函式。
如下圖所示：


資料動態變化，資料庫變了，視覺化圖也變化：





五. 難點及注意事項

初學的同學可能會遇到一下幾個問題：

1.其中Echarts和JQuery需要匯入的，即：
    <script src="echarts.min.js"></script>
    <script src="jquery-1.9.1.min.js"></script>

2.Echarts使用的方法請大家學習前一篇文章和官網文章，這裡不再敘述。

3.PHP檔案需要header("content-type:text/json;charset=utf-8");宣告Json格式，同時Ajax也需要設定dataType: "json"。

4.宣告的Ajax函式需要執行，對應程式碼中的TestAjax()，否則只是定義未執行。

5.如果Ajax報錯 [object Object]，如下圖所示：



這需要Json格式一致，而我的錯誤是因為在PHP檔案中增加了個註釋導致無值，百度都無法解決，頭都弄大了，所以寫程式碼需要仔細。



6.最後動態資料是通過變數實現的，即ages替換以前的 [5, 20, 36, 10, 10, 20]。
            series : [ {
                   name : "num",
                   type : "bar",
                   data : ages
            }]



最後希望這篇文章對你有所幫助，尤其是對Echarts視覺化感興趣的同學，同樣Java、C#、Python相關網站的原理一樣，程式碼也會上傳。最近心情真的好低落，哎！有時間寫日記總結下吧。
        穩坐珠江夜遊船，翻轉長隆水世界。
        笑談粵廣風流人，寧負天下不負卿。
哎！總是心事重重，自己真的有太多的不足和需要成長的地方，以前總會知足，現在也會。哎！為人處世真需要一輩子去學習，且寫且珍惜吧，傳遞正能量。
(By:Eastmount 2017-06-02 中午2點  http://blog.csdn.net/eastmount/ )

相關文章