Utilisez php+ajax+echarts.js pour implémenter un graphique de courbe statistique de réponse par minute-tutoriel php-php.cn

Utilisez php+ajax+echarts.js pour implémenter un graphique de courbe statistique de réponse par minute

不言

Libérer： 2023-03-23 07:32:01

original

2353 Les gens l'ont consulté

Suite au blog précédent, en plus d'implémenter des totaux statistiques, j'ai également utilisé l'echart de Baidu pour implémenter des courbes de réponses statistiques. L'effet est le suivant : http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/index

Baidu echart est une bibliothèque js professionnelle tierce pour les graphiques statistiques et les graphiques de courbes. Il est assez simple à utiliser selon les instructions.

Le code source est le suivant

Le code front-end html+js+css est le suivant

{__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>

Copier après la connexion

Le code php d'arrière-plan

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);
    }

Copier après la connexion

utilise les minutes par fois comme abscisse et la quantité de données de réponse comme ordonnée pour dessiner un graphique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!