正文

PHP, Mysql, Ajax, Jquery,Echarts实现前后端数据可视化

李海
李海 V管理员 /3 评论 /1610 阅读
0624

最近要将后台数据库上的一些数据以可视化的方法显示到前端，找来找去，发现百度开发的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实现前后端数据可视化

版权声明：除非注明，否则均为李海博客原创文章，转载或复制请以超链接形式并注明出处！