接着上一篇博客，除了实现统计总量外，我还用百度的echart实现了 统计答题曲线图。效果如下：http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/index
百度echart是一个专业的花统计图，曲线图的第三方js类库。按照使用说明使用还是蛮简单的。
源代码如下
前端 html+js+css代码如下
1 {__NOLAYOUT__} 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="utf-8"> 6 <!-- 引入 ECharts 文件 --> 7 <script src="__PUBLIC__/admin/js/echarts.common.min.js"></script> 8 <script src="__PUBLIC__/admin/js/jquery.min.js"></script> 9 </head> 10 <body> 11 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> 12 <div id="main" style=" 1400px;height:600px;"></div> 13 <a href="{:U('sum')}" target="_blank">实时统计平台答题总量</a> 14 15 16 </body> 17 </html> 18 19 <script type="text/javascript"> 20 21 22 23 24 var myChart = echarts.init(document.getElementById('main')); 25 option = { 26 title : { 27 text: '过去3小时答题情况', 28 subtext: '浙江工商大学新生事业教育平台试试答题数据' 29 }, 30 tooltip : { 31 trigger: 'axis' 32 }, 33 legend: { 34 data:['过去3小时答题量'] 35 }, 36 37 calculable : true, 38 xAxis : [ 39 { 40 type : 'category', 41 boundaryGap : false, 42 data : [] 43 } 44 ], 45 yAxis : [ 46 { 47 type : 'value', 48 axisLabel : { 49 formatter: '{value}' 50 } 51 } 52 ], 53 series : [ 54 { 55 name:'实时答题统计', 56 type:'line', 57 data:[], 58 }, 59 60 ] 61 }; 62 63 64 // 使用刚指定的配置项和数据显示图表。 65 66 url = "{:U('Statis/data')}"; 67 myChart.setOption(option); 68 // url = 'http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/data'; 69 70 $.get(url).done(function (data) { 71 // 填入数据 72 myChart.setOption({ 73 xAxis: { 74 data: data.x_data 75 }, 76 series: [{ 77 // 根据名字对应到相应的系列 78 data: data.y_data 79 }] 80 }); 81 }); 82 83 84 setInterval(function () { 85 86 $.get(url).done(function (data) { 87 // 填入数据 88 myChart.setOption({ 89 xAxis: { 90 data: data.x_data 91 }, 92 series: [{ 93 // 根据名字对应到相应的系列 94 data: data.y_data 95 }] 96 }); 97 }); 98 99 }, 60000); //一秒钟统计一次 100 101 102 103 104 105 </script>
后台php代码
1 public function data() { 2 3 $now = time(); 4 // $timeArray = new array(); 5 for($i=1;$i<=180;$i++){ 6 7 $time = $now - 3 * 60 * 60 + 60 * $i; 8 $timeArray[] = date('Y-m-d H:i', $time); 9 10 11 $map['time'] = array('between',array(date('Y-m-d H:i', $time),date('Y-m-d H:i', $time+60))); 12 $dataArray[] = D('Exercise')->where($map)->count(); 13 } 14 15 $data = array( 16 'x_data'=>$timeArray, 17 'y_data'=>$dataArray 18 ); 19 20 $this->ajaxReturn($data); 21 }
用每时间分钟作为横坐标，答题数据量作为纵坐标 画图