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 followsThe 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('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>
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); }
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!