laravel + vue實(shí)現(xiàn)的數(shù)據(jù)統(tǒng)計(jì)繪圖(今天、7天、30天數(shù)據(jù))
前言
本文主要是按照時(shí)段統(tǒng)計(jì)今天、7天、30天的數(shù)據(jù),利用laravel+vue實(shí)現(xiàn)的,下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
效果圖:

1. 前端vue
使用vue-highcharts
<highcharts :options="options"></highcharts>
data() {
return {
options: {
title: {
text: ''
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
credits: {
enabled: false // 去掉highcharts商標(biāo)
},
series: []
}
}
},
請(qǐng)求數(shù)據(jù)處理:
getTimingHistoryAct(time) {
getTimingHistory(time).then(response => {
const curHour = new Date().getHours()
const hoursArr = []
const dayArr = []
const seriesData = []
switch (time) {
case 1:
seriesData.length = 0
for (let i = 0; i <= curHour; i++) {
hoursArr.push(i < 10 ? '0' + i : '' + i)
seriesData[i] = 0
}
this.options.xAxis.categories = hoursArr.map(x => x + ':00')
response.data.forEach(record => {
const index = hoursArr.indexOf(record.hour)
if (index > -1) {
seriesData[index] = record.count
}
})
break
case 7:
seriesData.length = 0
for (let i = 0; i < 7; i++) {
const ymd = new Date(new Date() - 24 * 60 * 60 * 1000 * i).toLocaleString().split(' ')[0]
const ymdarr = ymd.split('/')
if (ymdarr[1] * 1 < 10) {
ymdarr[1] = '0' + ymdarr[1]
}
if (ymdarr[2] * 1 < 10) {
ymdarr[2] = '0' + ymdarr[1]
}
seriesData[i] = 0
dayArr.unshift(ymdarr.join('-'))
}
this.options.xAxis.categories = dayArr.map(x => x.substr(5))
response.data.forEach(record => {
const index = dayArr.indexOf(record.date)
if (index > -1) {
seriesData[index] = record.count
}
})
break
case 30:
// 同7天
break
}
this.options.series = [{
name: '商品點(diǎn)擊',
data: seriesData
}]
})
},
2. 后臺(tái)laravel
mysql測(cè)試數(shù)據(jù):
1 5440935 1 時(shí)尚博主家《心之語(yǔ)》 2018-07-28 19:20:49
2 5440935 1 時(shí)尚博主家《心之語(yǔ)》 2018-07-29 15:26:21
3 5440935 1 測(cè)試方案1 2018-07-29 15:38:43
...
public function getTimingHistory($time)
{
switch ($time) {
case '1':
$data = StatsPlanClick::where('created_at','<', Carbon::now())->where('created_at','>', Carbon::today())->select([DB::raw('DATE_FORMAT(created_at,\'%H\') as hour'), DB::raw('COUNT("*") as count')])->groupBy('hour')->get();
break;
case '7':
$data = StatsPlanClick::where('created_at','<', Carbon::now())->where('created_at','>', Carbon::today()->subDays(7))->select([DB::raw('DATE(created_at) as date'), DB::raw('COUNT("*") as count')])->groupBy('date')->get();
break;
case '30':
$data = StatsPlanClick::where('created_at','<', Carbon::now())->where('created_at','>', Carbon::today()->subDays(30))->select([DB::raw('DATE(created_at) as date'), DB::raw('COUNT("*") as count')])->groupBy('date')->get();
break;
default:
# code...
break;
}
return $this->successWithData($data);
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
淺析PHP中call user func()函數(shù)及如何使用call user func調(diào)用自定義函數(shù)
使用call_user_func函數(shù),通過(guò)傳入字符串函數(shù),可以調(diào)用自定義函數(shù),并且支持引用。該函數(shù)允許用戶(hù)調(diào)用直接寫(xiě)的函數(shù)并傳入一定的參數(shù),下面總結(jié)下這個(gè)函數(shù)的使用方法,需要的朋友參考下2015-11-11
PHP實(shí)現(xiàn)單條sql執(zhí)行多個(gè)數(shù)據(jù)的insert語(yǔ)句方法
今天小編就為大家分享一篇PHP實(shí)現(xiàn)單條sql執(zhí)行多個(gè)數(shù)據(jù)的insert語(yǔ)句方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
PHPStrom 新建FTP項(xiàng)目以及在線操作教程
PhpStorm是一個(gè)輕量級(jí)且便捷的PHP IDE,其提供的智能代碼補(bǔ)全,快速導(dǎo)航以及即時(shí)錯(cuò)誤檢查等功能大大提高了編碼效率。它是一款商業(yè)的 PHP 集成開(kāi)發(fā)工具,以其獨(dú)特的開(kāi)發(fā)便利性,短時(shí)間內(nèi)贏得了大量PHPer的青睞。今天我們來(lái)詳細(xì)學(xué)習(xí)下FTP相關(guān)的操作2016-10-10
PHP 使用 Imagick 裁切/生成縮略圖/添加水印自動(dòng)檢測(cè)和處理 GIF
這篇文章主要介紹了PHP 使用 Imagick 裁切/生成縮略圖/添加水印自動(dòng)檢測(cè)和處理 GIF的相關(guān)資料,需要的朋友可以參考下2016-02-02
php導(dǎo)出word文檔與excel電子表格的簡(jiǎn)單示例代碼
本篇文章主要是對(duì)php導(dǎo)出word文檔與excel電子表格的簡(jiǎn)單示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03

