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+mysql写的简单留言本实例代码
Jul 25 PHP
php中的数组操作函数整理
Aug 18 PHP
PHP中strtotime函数使用方法详解
Nov 27 PHP
PHP按行读取文件时删除换行符的3种方法
May 04 PHP
PHP中if和or运行效率对比
Dec 12 PHP
PHP实现即时输出、实时输出内容方法
May 27 PHP
php生成PDF格式文件并且加密
Jun 22 PHP
Symfony2函数用法实例分析
Mar 18 PHP
PHP身份证校验码计算方法
Aug 10 PHP
PHP如何搭建百度Ueditor富文本编辑器
Sep 21 PHP
PHP抽象类和接口用法实例详解
Jul 20 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
Oct 23 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 Smarty模板生成html文档的方法
2010/04/12 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python常用知识点汇总
2016/05/08 Python
Python打包可执行文件的方法详解
2016/09/19 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python 字符串追加实例
2019/07/20 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
智能电子应届生求职信
2013/11/10 职场文书
大学生社会实践评语
2014/04/25 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书