ECharts, PHP, MySQL, Ajax, JQuery實現前后端數據可視化

作者：菩提樹下的煮茶小童子 2017-10-11 18:17:06

開發數據可視化

最近要將后臺數據庫上的一些數據以可視化的方法顯示到前端，找來找去，發現百度開發的這套圖表工具庫還不錯，網上搜索了一下相關的教程，也算是實現了較為簡單的demo。于是寫下來，記錄一下。

[[206018]]

ECharts

ECharts是國人開發的一套前端的圖表工具庫，使用起來超方便，也很簡單(當然了，前提是理解了其工作原理之后)。

下面簡單的介紹一下，如何在項目中使用ECharts。

下載js代碼

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

個人覺得，開發人員下載完整版會比較好一點。而且官方建議的也是下載完整版。

下載Echarts

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

工作原理淺析

其實仔細的想想，ECharts的工作就是在網頁上顯示了一張特殊的圖片嘛。所以我們需要意識到，需要給“圖片”一個一個空間，這樣才會有圖表的安家之所嘛。

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

ECharts3下載

在項目中引入ECharts

如題，本小節就是大致的講一下如何簡單的使用這個圖標庫。

不妨看一下下面的代碼：

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

關鍵在于***一句：

myChart.setOption(option1);

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

Tutorial測試

另外手動的點擊上面的那個legend為“銷量”的小紅色的矩形，會有驚喜的喲。

<marquee><font color=”green” size=’6′>接下來開始進入今天的正題</font></marquee>

后臺處理

后臺處理包括使用PHP查詢數據庫，然后以數組的形式返回，再由JQuery以Ajax的形式獲取數據，交給前端進行顯示的過程。

數據庫端MySQL

數據是核心，所以建庫很重要。這里僅僅是為了演示，所以數據庫建的很簡單，如下圖：

建立數據庫

PHP端

需要注意的是，數據庫端返回的時候必須是JSON類型，這樣才可以被ajax處理的更方便。

<?php 
header("Content-type=text/json;charset=UTF-8"); 
 
$conn = mysql_connect("localhost", "root", "mysql") or die("連接數據庫的過程失敗！"); 
mysql_query("set names utf-8"); 
mysql_select_db("test"); 
 
 
$resultset = mysql_query("select name, age  from echartsuser", $conn); 
////////////////////////////////////////////////準備數據進行裝填 
$data = array(); 
////////////////////////////////////////////////實體類 
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類型的數據 
echo json_encode($data);

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

JSON接口測試

JQuery & Ajax處理

JQuery真的是難的的一個函數工具庫，因此使用JQuery處理起來ajax請求會降低代碼編寫的復雜度，其底層將自動的處理兼容性問題。這很GEEK。

本例，目的很明確，獲取剛才的數據接口內的數據。所以代碼很簡單，如下：

// 初始化兩個數組，盛裝從數據庫中獲取到的數據 
    var names = [], ages = []; 
     
    //調用ajax來實現異步的加載數據 
    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獲取服務器數據出錯了！"+ errmsg); 
            } 
        }); 
    return names, ages; 
    } 
     
    // 執行異步請求 
    getusers();

ECharts 端處理

現在“萬事俱備，只欠東風”了，數據都已經有了，剩下的就是如何顯示它們了。按照一開始博主的蓋房子理論，下面就把骨架搭起來吧。

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

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

前端全部代碼

個人覺得有個完整的代碼會給人不少的啟發，那么這里還是貼出前端交互的代碼吧，也方便大家查看。

<!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 測試</h1> 
    <hr> 
 
     
    // 初始化兩個數組，盛裝從數據庫中獲取到的數據 
    var names = [], ages = []; 
     
    //調用ajax來實現異步的加載數據 
    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獲取服務器數據出錯了！"+ errmsg); 
            } 
        }); 
    return names, ages; 
    } 
     
    // 執行異步請求 
    getusers(); 
     
     
    // 初始化 圖表對象 
        var mychart = echarts.init(document.getElementById("container")); 
        // 進行相關項的設置，也就是所謂的搭搭骨架，方便待會的ajax異步的數據填充 
        var option = { 
            title : { 
                text : '姓名年齡分布圖' 
            }, 
            tooltip : { 
                show : true 
            }, 
            legend : { 
                data : [ 'age' ] 
            }, 
            xAxis : [ { 
                data : names 
            } ], 
            yAxis : [ { 
                type : 'value' 
            } ], 
            series : [ { 
                "name" : "age", 
                "type" : "bar", 
                "data" : ages 
            } ] 
        }; 
 
        // 將配置項賦給chart對象，來顯示相關的數據 
        mychart.setOption(option); 
         
         
         
         
    </script> 
<marquee>確認可以到達這里啊</marquee> 
 
</body> 
</html>