服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|

服务器之家 - 编程语言 - PHP教程 - laravel + vue实现的数据统计绘图(今天、7天、30天数据)

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

2019-09-17 13:44芒果屋里的猫 PHP教程

这篇文章主要给大家介绍了关于利用laravel + vue如何实现数据统计绘图(今天、7天、30天数据)的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,需要的朋友们下面随着小编来一起看看吧

前言

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

效果图:

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

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商标
  },
  series: []
  }
 }
 },

请求数据处理:

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测试数据:

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);
}

总结

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

延伸 · 阅读

精彩推荐
  • PHP教程PHP命名空间namespace及use的简单用法分析

    PHP命名空间namespace及use的简单用法分析

    这篇文章主要介绍了PHP命名空间namespace及use的简单用法,结合实例形式分析了php命名空间的功能、使用方法及相关操作注意事项,需要的朋友可以参考下 ...

    Frank看庐山1662019-09-16
  • PHP教程PHP获取星期几的常用方法小结

    PHP获取星期几的常用方法小结

    这篇文章主要介绍了PHP获取星期几的常用方法,结合实例形式分析了php使用date函数获取指定日期星期几的具体操作技巧与相关注意事项,需要的朋友可以参考下...

    天涯海角路4272019-07-16
  • PHP教程Yii1.1框架实现PHP极光推送消息通知功能

    Yii1.1框架实现PHP极光推送消息通知功能

    这篇文章主要介绍了Yii1.1框架实现PHP极光推送消息通知的相关资料,需要的朋友可以参考下...

    梦想是什么1692019-09-07
  • PHP教程PHP数字金额转换成中文大写显示

    PHP数字金额转换成中文大写显示

    今天小编就为大家分享一篇关于PHP数字金额转换成中文大写显示,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧...

    只是个宝宝3092019-07-07
  • PHP教程PHP耦合设计模式实例分析

    PHP耦合设计模式实例分析

    这篇文章主要介绍了PHP耦合设计模式,结合实例形式分析了php面向对象程序设计中降低耦合度的相关操作技巧,需要的朋友可以参考下 ...

    山雨欲来-风满楼3302019-09-14
  • PHP教程workerman结合laravel开发在线聊天应用的示例代码

    workerman结合laravel开发在线聊天应用的示例代码

    聊天功能是很常见的一种功能,Workerman是一款开源高性能异步PHP socket即时通讯框架。这篇文章主要介绍了workerman结合laravel开发在线聊天应用,感兴趣的小伙伴们可以参考一下...

    逍遥侠3772019-08-30
  • PHP教程php5.x禁用eval的操作方法

    php5.x禁用eval的操作方法

    这篇文章主要介绍了php5.x禁用eval的操作方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下...

    运维4062019-08-31
  • PHP教程PHP实现websocket通信的方法示例

    PHP实现websocket通信的方法示例

    这篇文章主要介绍了PHP实现websocket通信的方法,结合实例形式分析了php基于websocket类的socket通信相关客户端与服务器端操作技巧,需要的朋友可以参考下...

    风轻云淡1805182612019-09-09
北京塞车全天计划精准版