PHP, Mysql, Ajax, Jquery,Echarts实现前后端数据可视化_建站教程

最近要将后台数据库上的一些数据以可视化的方法显示到前端，找来找去，发现百度开发的Echarts这套图表工具库非常不错，网上搜索了一下相关的教程，也算是实现了较为简单的demo。于是写下来，记录一下。

第一步：后台处理

后台处理包括使用php查询数据库，然后以数组的形式返回，再由JQuery以Ajax的形式获取数据，交给前端进行显示的过程。

1、从MySQL数据库获取数据

需要注意的是，数据库端返回的时候必须是JSON类型，这样才可以被ajax处理的更方便。

<?php    //PHP连接数据库    header("content-type:text/json;charset=utf-8");    //链接数据库    $con = mysqli_connect("localhost", "root", "123456");    if (!$con)    {        die('Could not connect database: ' );    }     //选择数据库    $db_selected = mysqli_select_db($con, "test");    if (!$db_selected)    {        die ("Can\'t use yxz : " );    }     //执行MySQL查询-设置UTF8格式    // mysqli_query("SET NAMES utf8");      // mysqli_query()    //查询学生信息    $sql = "SELECT * FROM TEST ";    $result = mysqli_query($con,$sql);     //定义变量json存储值    $data="";    $array= array();    class emp{        public $id;        public $name;        public $sal;        public $comm;    }    while ($row = mysqli_fetch_row($result))    {        list($id,$name,$sal,$comm) = $row;             $em = new emp();        $em->id = $id;        $em->name = $name;        $em->sal = $sal;        $em->comm = $comm;         //数组赋值        $array[] = $em;    }     $data = json_encode($array);    echo $data; ?>

那么验证返回的数据类型到底是不是JSON，我们只需要做下接口测试即可。

2、JQUERY & AJAX处理

JQuery真的是难的的一个函数工具库，因此使用JQuery处理起来ajax请求会降低代码编写的复杂度，其底层将自动的处理兼容性问题[文]。

本例，目的很明确，获取刚才的数据接口内的数据。所以代码很简单，如下：

// 初始化两个数组，盛装从数据库中获取到的数据    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: "getdata.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>

备注：里面的2个js可以到Echarts官网下载，也可以直接使用https://www.bootCDN.cn/里面的CDN。

演示结果

至此，PHP, Mysql, Ajax, Jquery,Echarts实现前后端数据可视化的过程就完成了，下面来看看效果吧！

PHP, Mysql, Ajax, Jquery,Echarts实现前后端数据可视化-第1张图片