php从mysql之中无法实时调出数据

那位有什么好的方法,从数据库调出数据实时显示到php页面上面折线图吗?
我通过定时器定时向后台发送请求,但是它每次刷新都会把以前的数据全部显示出来。或者我如何才能把以前的那部分数据去掉了。

img

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据库图形</title>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">

        //初始化
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title: {
                text: 'test'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        });
        //数据加载完之前先显示一段简单的loading动画

        //名字数组(实际用来盛放X轴坐标值)
        var names = [];
        //value数组(实际用来盛放Y坐标值)  
        var nums = [];
        function getJson() {
            console.log(1)
            $.ajax({
                type: "get",
                async: true,
                url: "1.php",
                data: {},
                //返回数据形式为json
                dataType: "json",
                //请求成功时执行该函数内容,result即为服务器返回的json对象       
                success: function (result) {
                    console.log(result)
                    // alert("连接成功");
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            //挨个取出name并填入名字数组,这个xname是根据你在php那发过来的列表来的,下面那个ysh也是
                            names.push(result[i].xname);
                        }
                        for (var i = 0; i < result.length; i++) {
                            //挨个取出value并填入value数组
                            nums.push(result[i].ysh);
                        }
                        //数据都存进去了,就不需要加载动画了,所以这里把他隐藏
                        myChart.hideLoading();
                        //将图表渲染进容器里
                        myChart.setOption({
                            xAxis: {
                                data: names
                            },
                            series: [{
                                name: '销量', data: nums
                            }]
                        });

                    }

                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                    console.log(errorMsg)
                }
            })
        }
        getJson();
     setInterval("getJson()",5000)
    </script>
</body>
</html>

select 语句中加上针对时间的 where 比如 where tableColTime > now()-interval 1 day

因为你的 nums和names都是在push,每次请求后先清空下。
success方法中 nums=[],names=[]