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


Posted in PHP onJuly 31, 2018

前言

本文主要是按照时段统计今天、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 相关文章推荐
一个用于网络的工具函数库
Oct 09 PHP
PHP新手上路(三)
Oct 09 PHP
drupal 代码实现URL重写
May 04 PHP
UCenter 批量添加用户的php代码
Jul 17 PHP
基于PHP常用字符串的总结(待续)
Jun 07 PHP
PHP中你应该知道的require()文件包含的正确用法
Jun 12 PHP
PHP-FPM之Chroot执行环境详解
Aug 03 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
Jun 19 PHP
PHP 验证身份证是否合法的函数
Feb 09 PHP
PHP简单计算两个时间差的方法示例
Jun 20 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
Jan 28 PHP
php根据地址获取百度地图经纬度的实例方法
Sep 03 PHP
PHP常用日期加减计算方法实例小结
Jul 31 #PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
Jul 30 #PHP
PHP笛卡尔积实现算法示例
Jul 30 #PHP
作为PHP程序员你要知道的另外一种日志
Jul 30 #PHP
详解Laravel5.6 Passport实现Api接口认证
Jul 27 #PHP
PHP实现的DES加密解密类定义与用法示例
Nov 02 #PHP
详解laravel安装使用Passport(Api认证)
Jul 27 #PHP
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
vue实现弹幕功能
2019/10/25 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python程序语言快速上手教程
2012/07/18 Python
python删除文件示例分享
2014/01/28 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python跳出多重循环的方法示例
2019/07/03 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
优秀老师事迹材料
2014/02/05 职场文书
民生工程实施方案
2014/03/22 职场文书
小学英语课后反思
2014/04/26 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
抢劫罪辩护词
2015/05/21 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
python 实现图片特效处理
2022/04/03 Python