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中使用sleep造成mysql读取失败的案例和解决方法
Aug 21 PHP
php目录拷贝实现方法
Jul 10 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
Dec 25 PHP
PHP程序员的技术成长规划
Mar 25 PHP
PHP中FTP相关函数小结
Jul 15 PHP
php封装的page分页类完整实例
Oct 18 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
Dec 21 PHP
PHP设计模式之适配器模式定义与用法详解
Apr 03 PHP
PHP编程实现的TCP服务端和客户端功能示例
Apr 13 PHP
Laravel实现短信注册的示例代码
May 29 PHP
laravel返回统一格式错误码问题
Nov 04 PHP
PHP mkdir创建文件夹实现方法解析
Nov 13 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处理斐波那契数列非递归方法
2012/02/04 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php统计文章排行示例
2014/03/04 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
PHP使用函数用法详解
2018/09/30 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
js实现下一页页码效果
2017/03/07 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python探索之SocketServer详解
2017/10/28 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
群众路线剖析材料
2014/02/02 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
求职信结尾怎么写
2014/05/26 职场文书
创先争优标语
2014/06/27 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python