laravel vue实现的数据统计绘图（今天、7天、30天数据)

前言

本文主要是按照时段统计今天、7天、30天的数据，利用laravel vue实现的，下面话不多说了，来一起看看详细的介绍吧

效果图：

1.前端某视频剪辑软件

使用vue-高图表

高图表： options=' options '/高图表data(){ return { options : { title : { text : ' ' }，xAxis: { categories: [] }，yaxis : { title : { text : ' ' }，plotline :[{ value 3333:width:color 333333: ' # 808080 ' } }去掉高级图表商标}，series: [] } } }，请求数据处理：

getTimingHistoryAct(时间){ getTimingHistory(时间)。然后（响应={ const curHour=new Date().getHours()const hours ar=[]const Dayarr=[]const系列数据=[]switch(time){ case 1:系列数据。长度=0(对于(让I=0；I=curHouri){ hoursar . push(I 10？0 ' I : ' ' I)系列数据[I]=0 }这个。选项。xaxis。类别=小时ar。map(x=x ' :00 ')响应。数据。foreach(记录={ const index=小时。(记录的索引。hour)if(index-1){ series data[index]=record。count })中断案例7:系列数据。长度=0(对于(让I=0；i7；i ) { const ymd=新日期（新日期()- 24 * 60 * 60 * 1000 * i).toLocaleString().split(')[0]const ym darr=ymd。split('/')if(ym darr[1]* 1 10){ ym darr[1]=' 0 ' ym darr[1]} if(ym darr[2]* 1 10){ ym darr[2]=' 0 ' ym darr[1]} series data[I]=0 Dayarr。unshift(ym darr。连接('-')这个。选项。Xaxis。类别=Dayarr。地图(x=x .同七天打破}这个。选项。series=[{ name : '商品点击，data: seriesData }] }) }，2 .后台laravel

关系型数据库测试数据：

1 5440935 1 时尚博主家《心之语》 2018-07-28 19:20:492 5440935 1 时尚博主家《心之语》 2018-07-29 15:26:213 5440935 1 测试方案1 2018-07-29 15:38:43.

公共函数gettimenghistory($ time){ switch($ time){ case ' 1 ' : $ data=statspanclick :3360 where(' created _ at '，''，carbon 3360: now())-where(' created _ at '，''，carbon 3360: today())-选择([db 3360: raw(' DATE _ FORMAT(created _ at，' %H\ ')作为小时')打破；case ' 7 ' : $ data=statspanclick :3360其中(' created _ at '，''，carbon : now())-其中(' created _ at '，''，carbon : day()-subDays(7))-选择([db 3360: raw(' DATE(created _ at)as DATE ')))，DB:raw('COUNT('*)打破；case ' 30 ' : $ data=statspanclick :3360其中(' created _ at '，''，carbon : now())-其中(' created _ at '，''，carbon : day()-subDays(30))-选择([db 3360: raw(' DATE(created _ at)as DATE ')))，DB:raw('COUNT打破；default: #代码.打破；}返回$ this-successWithData($ data)；}总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。