ECharts, PHP, MySQL, Ajax, JQuery 實現前後端資料視覺效果

標籤：

• • ECharts
    • 下載js代碼
    • 工作原理淺析
    • 在項目中引入ECharts
  • 幕後處理
    • 資料庫端MySQL
    • PHP端
    • JQuery Ajax處理
    • ECharts 端處理
    • 前端全部代碼
    • 示範結果
  • 總結

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

ECharts

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

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

下載js代碼

： http://echarts.baidu.com/

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

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

工作原理淺析

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

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

在項目中引入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>    <!-- 先準備一個用於盛放圖表的容器 -->    <div id=‘container‘ style="width: 600px; height: 400px;"></div>    <script>        //通過 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);

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

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

接下來開始進入今天的正題

幕後處理

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

資料庫端MySQL

資料是核心，所以建庫很重要。這裡僅僅是為了示範，所以資料庫建的很簡單，如：

PHP端

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

<?phpheader("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的外掛程式，所以可以很方便的檢測。如：

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>    <div id="container" style="width: 600px; height: 400px;"></div>    <script>    // 初始化兩個數組，盛裝從資料庫中擷取到的資料    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].name);                        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>

示範結果

至此，編碼任務就算完成了。那麼迫不及待的來看看效果吧。

那麼，稍微的修改一下資料，再來看看結果會怎樣，重新整理之後如：

總結

最後來回顧一下，本次實驗的收穫。其實也就是對於ECharts的一個比較“全棧”（請允許我用了這麼個不太恰當的詞 O(∩_∩)O ） 。比較簡單的實現了後端以及前端的資料視覺效果顯示的一個流程。

用到的技術也都是很福士化的了，當然後端不僅可以由PHP來完成，JAVA，Python，Golang等等都是可以的，只是使用PHP比較方便罷了。只要可以根據這個介面擷取到想要的資料就行。

ECharts, PHP, MySQL, Ajax, JQuery 實現前後端資料視覺效果