Use php+ajax+echarts.js to implement statistical answer curve chart per minute

不言
Release: 2023-03-23 07:32:01
Original
2300 people have browsed it


Following the previous blog, in addition to realizing statistical totals, I also used Baidu’s echart to realize statistical answer curve charts. The effect is as follows: http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/index

##Baidu echart is a professional third-party js library for statistical charts and curve charts. It is quite simple to use according to the instructions.

The source code is as follows

The front-end html+js+css code is as follows

{__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>
Copy after login



Backend php Code

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);
    }
Copy after login



Use minutes per time as the abscissa and the amount of answer data as the ordinate to draw the graph


The above is the detailed content of Use php+ajax+echarts.js to implement statistical answer curve chart per minute. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!