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 相关文章推荐
PHP.MVC的模板标签系统(三)
Sep 05 PHP
php网页后退不再出现过期
Mar 08 PHP
php中获得视频时间总长度的另一种方法
Sep 15 PHP
php在文件指定行中写入代码的方法
May 23 PHP
PHP实现多图片上传类实例
Jul 26 PHP
PHP框架Swoole定时器Timer特性分析
Aug 19 PHP
php 实现进制相互转换
Apr 07 PHP
Laravel 加载第三方类库的方法
Apr 20 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
May 11 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
May 28 PHP
PHP中常见的密码处理方式和建议总结
Oct 14 PHP
laravel orm 关联条件查询代码
Oct 21 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
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python读取YAML文件过程详解
2019/12/30 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python爬虫教程知识点总结
2020/10/19 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
客户表扬信范文
2014/01/10 职场文书
优秀教师先进事迹
2014/01/22 职场文书
大学军训感言600字
2014/02/25 职场文书
体操比赛口号
2014/06/10 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
西柏坡观后感
2015/06/08 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
Java数组详细介绍及相关工具类
2022/04/14 Java/Android