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 socke 向指定页面提交数据
Jul 23 PHP
php session应用实例 登录验证
Mar 16 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
Jul 19 PHP
php合并js请求的例子
Nov 01 PHP
Linux下PHP连接Oracle数据库
Aug 20 PHP
PHP性能分析工具XHProf安装使用教程
May 13 PHP
PHP检查网站是否宕机的方法示例
Jul 24 PHP
YII分模块加载路由的实现方法
Oct 01 PHP
ThinkPHP中图片按比例切割的代码实例
Mar 08 PHP
Yii框架分页技术实例分析
Aug 30 PHP
php多进程并发编程防止出现僵尸进程的方法分析
Feb 28 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
完美解决PHP中文乱码
2009/11/26 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python代理抓取并验证使用多线程实现
2013/05/03 Python
详解Python中的文本处理
2015/04/11 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
质检员岗位职责
2013/12/17 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
员工聘用合同范本
2015/09/21 职场文书
2016七夕情人节感言
2015/12/09 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server