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

程序员文章站 2022-04-09 11:13:44

...

接着上一篇博客，除了实现统计总量外，我还用百度的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('sum')}" target="_blank">实时统计平台答题总量</a>


</body>
</html>

<script type="text/javascript">




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


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

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

$.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('Y-m-d H:i', $time);

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

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

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

以上就是用php+ajax+echarts.js 实现统计每分钟答题曲线图的详细内容，更多请关注其它相关文章！

上一篇： php常见的错误类型有哪四种

下一篇：如何通过html制作导航条