数据库数据可视化显示（php+echarts+jquery+ajax）

最新推荐文章于 2024-04-12 12:51:06 发布

宋宋zihe

最新推荐文章于 2024-04-12 12:51:06 发布

阅读量1.9w

点赞数 1

分类专栏： php 文章标签： php echarts ajax jQuery 数据可视化

本文链接：https://blog.csdn.net/waimai666/article/details/89258680

版权

php 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实验室最近分配的项目，我的任务是将数据库的数据使用echarts显示出来。
代码如下：

sql_config.php：

<?php
$servername='localhost'; //mysql数据库服务器

$username='root'; //mysql数据库用户名

$password='你的密码'; //mysql数据库密码,初始默认密码为空

$database='zsy'; //mysql数据库名
?>

等下要用的话直接require就可以。
接下来就是将数据从数据库取出并储存成json格式，这里我遇到一个问题，就是给的数据库数据的字段名称有特殊符号，比如℃，我使用了sql的as语句解决，将特殊的字段名转换成了易操作的字段名。
get.php：

<?php
require("sql_config.php");
$conn = new mysqli($servername, $username, $password);
mysqli_query($conn,"set names 'utf8'"); //数据库输出编码
mysqli_select_db($conn,$database); //打开数据库
$result = mysqli_query($conn,"select 采样日期 ,`闪点(闭口)(℃)` as 闪点1");//打开表
$data="";
$array= array();
class User{
    public $采样日期;
    public $闪点1;
}
//mysql_fetch_array() 函数从结果集中取得一行作为关联数组，返回根据从结果集取得的行生成的数组，如果没有更多行则返回 false
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
    $user=new User();
    $user->采样日期 = $row['采样日期'];
    $user->闪点1 = $row['闪点1'];
    $array[]=$user;//将数据给到数组
}
$data=json_encode($array);//转化为json格式
echo $data;//检查是否能够输出正确的json格式数据。
?>

接下来是显示界面，关于echarts的知识可以百度去echarts的官网，五分钟就可以上手。

echarts.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts</title>
    <script type="text/javascript" src="echarts.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="width: 1400px;height:400px;"></div>
    <script type="text/javascript">

        var arr1=[],arr2=[];
        function arrTest(){
            //这个功能块的作用就是读取json数据。
            $.ajax({
                type:"post",//请求服务器载入数据
                async:false,//异步属性
                url:"get.php",
                data:{},
                dataType:"json",
                success:function(result){
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            arr1.push(result[i].采样日期);
                            arr2.push(result[i].闪点1);

                        }
                    }
                }
            })
            return arr1,arr2;
        }
        arrTest();
        //第一个图
        var  myChart = echarts.init(document.getElementById('main1'));
        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '闪点(闭口),℃',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data:arr1
        },
        yAxis: {
            type: 'value',
                boundaryGap: [0, '100%']
        },
        series: [
            {
                name:'闪点',
                type:'line',
                smooth:true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: 'rgb(255, 70, 131)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: arr2
            }
        ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
     


    </script>
</body>
</html>

这样echarts图就出来咯：
在这里插入图片描述
在写该文章时我删了大部分代码，只留了部分代码并做了部分修改，只显示了一个图，如果要显示多个图，只需要增加容器。这里只是用一个图举例子，如果代码有问题可以留言。

宋宋zihe

关注

1
点赞
踩
29

收藏

觉得还不错? 一键收藏
2
评论
数据库数据可视化显示（php+echarts+jquery+ajax）

实验室最近分配的项目，我的任务是将数据库的数据使用echarts显示出来。代码如下：sql_config.php：<?php$servername='localhost'; //mysql数据库服务器$username='root'; //mysql数据库用户名$password='你的密码'; //mysql数据库密码,初始默认密码为空$database='zsy';...
复制链接

扫一扫