主頁 > 知識庫 > laravel + vue實現(xiàn)的數(shù)據(jù)統(tǒng)計繪圖(今天、7天、30天數(shù)據(jù))

laravel + vue實現(xiàn)的數(shù)據(jù)統(tǒng)計繪圖(今天、7天、30天數(shù)據(jù))

熱門標(biāo)簽:太原400電話申請流程 宿州正規(guī)外呼系統(tǒng)軟件 電信外呼系統(tǒng)多少錢一個月 合肥企業(yè)外呼系統(tǒng)線路 萍鄉(xiāng)商鋪地圖標(biāo)注 神龍斗士電話機(jī)器人 桂陽公司如何做地圖標(biāo)注 代理打電話機(jī)器人 企業(yè)400電話辦理多少費用

前言

本文主要是按照時段統(tǒng)計今天、7天、30天的數(shù)據(jù),利用laravel+vue實現(xiàn)的,下面話不多說了,來一起看看詳細(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: []
  }
 }
 },

請求數(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: '商品點擊',
   data: seriesData
  }]
  })
 },

2. 后臺laravel

mysql測試數(shù)據(jù):

1 5440935 1 時尚博主家《心之語》 2018-07-28 19:20:49
2 5440935 1 時尚博主家《心之語》 2018-07-29 15:26:21
3 5440935 1 測試方案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é)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

您可能感興趣的文章:
  • 單頁面vue引入百度統(tǒng)計的使用方法示例詳解
  • vue單頁應(yīng)用加百度統(tǒng)計代碼(親測有效)
  • Vue中使用matomo進(jìn)行訪問流量統(tǒng)計的實現(xiàn)
  • Vue自定義指令上報Google Analytics事件統(tǒng)計的方法
  • vue中如何添加百度統(tǒng)計代碼

標(biāo)簽:衡陽 白銀 崇左 廊坊 鄂州 太原 綏化 辛集

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《laravel + vue實現(xiàn)的數(shù)據(jù)統(tǒng)計繪圖(今天、7天、30天數(shù)據(jù))》,本文關(guān)鍵詞  laravel,vue,實現(xiàn),的,數(shù)據(jù)統(tǒng)計,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《laravel + vue實現(xiàn)的數(shù)據(jù)統(tǒng)計繪圖(今天、7天、30天數(shù)據(jù))》相關(guān)的同類信息!
  • 本頁收集關(guān)于laravel + vue實現(xiàn)的數(shù)據(jù)統(tǒng)計繪圖(今天、7天、30天數(shù)據(jù))的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章