用php+ajax+echarts.js 实现统计每分钟答题曲线图

不言

发布： 2023-03-23 07:32:01

原创

2355 人浏览过

接着上一篇博客，除了实现统计总量外，我还用百度的echart实现了统计答题曲线图。效果如下：http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/index

百度echart是一个专业的花统计图，曲线图的第三方js类库。按照使用说明使用还是蛮简单的。

源代码如下

前端 html+js+css代码如下

{__NOLAYOUT__}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="__PUBLIC__/admin/js/echarts.common.min.js"></script>
    <script src="__PUBLIC__/admin/js/jquery.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <p id="main" style="width: 1400px;height:600px;"></p>
    <a href="{:U(&#39;sum&#39;)}" target="_blank">实时统计平台答题总量</a>


</body>
</html>

<script type="text/javascript">




var myChart = echarts.init(document.getElementById(&#39;main&#39;));
option = {
    title : {
        text: &#39;过去3小时答题情况&#39;,
        subtext: &#39;浙江工商大学新生事业教育平台试试答题数据&#39;
    },
    tooltip : {
        trigger: &#39;axis&#39;
    },
    legend: {
        data:[&#39;过去3小时答题量&#39;]
    },
    
    calculable : true,
    xAxis : [
        {
            type : &#39;category&#39;,
            boundaryGap : false,
            data : []
        }
    ],
    yAxis : [
        {
            type : &#39;value&#39;,
            axisLabel : {
                formatter: &#39;{value}&#39;
            }
        }
    ],
    series : [
        {
            name:&#39;实时答题统计&#39;,
            type:&#39;line&#39;,
            data:[],
        },
        
    ]
};


 // 使用刚指定的配置项和数据显示图表。

url = "{:U(&#39;Statis/data&#39;)}";
myChart.setOption(option);
// url = &#39;http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/data&#39;;

$.get(url).done(function (data) {
        // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.x_data
        },
        series: [{
            // 根据名字对应到相应的系列
            data: data.y_data
        }]
    });
});

    
setInterval(function () {
    
    $.get(url).done(function (data) {
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: data.x_data
            },
            series: [{
                // 根据名字对应到相应的系列
                data: data.y_data
            }]
        });
    });

}, 60000);  //一秒钟统计一次





</script>

登录后复制

后台php代码

public function data() {
        
        $now = time();
        // $timeArray = new array();
        for($i=1;$i<=180;$i++){
            
            $time = $now - 3 * 60 * 60 + 60 * $i;
            $timeArray[] = date(&#39;Y-m-d H:i&#39;, $time);

            
            $map[&#39;time&#39;]  = array(&#39;between&#39;,array(date(&#39;Y-m-d H:i&#39;, $time),date(&#39;Y-m-d H:i&#39;, $time+60)));
            $dataArray[] = D(&#39;Exercise&#39;)->where($map)->count();
        }

        $data = array(
            &#39;x_data&#39;=>$timeArray, 
            &#39;y_data&#39;=>$dataArray
        );
        
        $this->ajaxReturn($data);
    }

登录后复制

用每时间分钟作为横坐标，答题数据量作为纵坐标画图

以上是用php+ajax+echarts.js 实现统计每分钟答题曲线图的详细内容。更多信息请关注PHP中文网其他相关文章！