需求是获取日,周,月的数据折线图变化,先看下效果图大概是这样:
首先看下前台html部分:
<van-row style="margin-top: 60px;margin-left: 10px;text-align: center">
<van-button v-on:click="startdata" type="primary" size="small">日数据</van-button>
<van-button v-on:click="startweek" type="primary" size="small">周数据</van-button>
<van-button v-on:click="startmonth" type="primary" size="small">月数据</van-button>
<div id="container" style="max-width:800px;height:400px"></div>
<div id="container1" style="max-width:800px;height:400px"></div>
</van-row>设置三个按钮进行切换,分别绑定事件:startdate startweek startmonth
下方两个div分别存放着两个折线图 id为container 和 container1
接下来是JS部分--引入JS文件:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>vue部分:
var obj = JSON.parse(window.localStorage.getItem('WIS_MRF.user'));
if(obj == null){
window.location.href = '../html/login.html';
}
var data_id = obj.id;//当前用户的id传到接口进行判断接值
var app = new Vue({
el: "#app",
data() {
return {
active:1,
type:"",
login_check: false,
computedTime: 0,
//日数据要渲染的数据
adata:"",
bdata:"",
cdata:"",
ddata:"",
edata:"",
fdata:"",
gdata:"",
acount:"",
bcount:"",
ccount:"",
dcount:"",
ecount:"",
fcount:"",
gcount:"",
//月数据要渲染的数据
April:"",
August:"",
February:"",
January:"",
July:"",
June:"",
March:"",
May:"",
November:"",
October:"",
September:"",
December:"",
Aprilcount:"",
Augustcount:"",
Februarycount:"",
Januarycount:"",
Julycount:"",
Junecount:"",
Marchcount:"",
Maycount:"",
Novembercount:"",
Octobercount:"",
Septembercount:"",
Decembercount:"",
//周数据要渲染的数据
Monday:"",
Tuesday:"",
Wednesday:"",
Thursday:"",
Friday:"",
Saturday:"",
Sunday:"",
Mondaycount:'',
Tuesdaycount:'',
Wednesdaycount:'',
Thursdaycount:'',
Fridaycount:'',
Saturdaycount:'',
Sundaycount:''
}
},
methods: {
homePage(){
location.href = "statement.html"
},
onClickLeft(){
location.href = "statement.html"
},
//点击日数据触发的请求数据
startdata(){
var post_data = {
method: 'trend.chart',
nonce: 'trend.chart',
id: data_id,
type:1
}
var _self = this;
axios.post('/api/v1', api_data_sign(post_data, 'mrf'))
.then(function (response) {
var data = response.data;
if (response.data.code == 200) {
//从接口拿到的值,传到前台的值里面
_self.adata = data.adata/100
_self.bdata = data.bdata/100
_self.cdata = data.cdata/100
_self.ddata = data.ddata/100
_self.edata = data.edata/100
_self.fdata = data.fdata/100
_self.gdata = data.gdata/100
_self.acount = data.acount//0-6
_self.bcount = data.bcount//6-9
_self.ccount = data.ccount//9-12
_self.dcount = data.dcount//12-15
_self.ecount = data.ecount//15-18
_self.fcount = data.fcount//18-21
_self.gcount = data.gcount//21-24
_self.active = 1
//关于今日时间段内,金额的总和----这个就是折线图
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '金额'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
//折线图的横坐标 代表一个时间段
categories: [ '6', '9', '12', '15', '18', '21','24']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '小时',
//每个时间段对应的值
data: [_self.adata, _self.bdata, _self.cdata, _self.ddata, _self.edata, _self.fdata, _self.gdata],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
var chart = Highcharts.chart('container1', {
chart: {
type: 'line'
},
title: {
text: '笔数'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
//笔数的折线图
categories: [ '6', '9', '12', '15', '18', '21','24']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '笔数',
data: [_self.acount, _self.bcount, _self.ccount, _self.dcount, _self.ecount, _self.fcount, _self.gcount],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
}).catch(function (error) {
});
},
//月数据
startmonth(){
var post_data1 = {
method: 'trend.chart',
nonce: 'trend.chart',
id: data_id,
type:2
}
var _self = this;
axios.post('/api/v1', api_data_sign(post_data1, 'mrf'))
.then(function (response) {
var data = response.data;
if (response.data.code == 200) {
_self.January = data.January/100
_self.February = data.February/100
_self.March = data.March/100
_self.April = data.April/100
_self.May = data.May/100
_self.June = data.June/100
_self.July = data.July/100
_self.August = data.August/100
_self.September = data.September/100
_self.October = data.October/100
_self.November = data.November/100
_self.December = data.December/100
_self.Januarycount = data.Januarycount
_self.Februarycount = data.Februarycount
_self.Marchcount = data.Marchcount
_self.Aprilcount = data.Aprilcount
_self.Maycount = data.Maycount
_self.Junecount = data.Junecount
_self.Julycount = data.Julycount
_self.Augustcount = data.Augustcount
_self.Septembercount = data.Septembercount
_self.Octobercount = data.Octobercount
_self.Novembercount = data.Novembercount
_self.Decembercount = data.Decembercount
_self.active = 3
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '金额'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '月份',
data: [_self.January,_self.February, _self.March,
_self.April, _self.May,
_self.June, _self.July, _self.August,
_self.September,_self.October,_self.November,
_self.December,
],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
var chart = Highcharts.chart('container1', {
chart: {
type: 'line'
},
title: {
text: '笔数'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '月份',
data: [_self.Januarycount,_self.Februarycount, _self.Marchcount,
_self.Aprilcount, _self.Maycount,
_self.Junecount, _self.Julycount, _self.Augustcount,
_self.Septembercount,_self.Octobercount,_self.Novembercount,
_self.Decembercount,
],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
}).catch(function (error) {
});
},
//周数据
startweek(){
var post_data2 = {
method: 'trend.chart',
nonce: 'trend.chart',
id: data_id,
type:3
}
var _self = this;
axios.post('/api/v1', api_data_sign(post_data2, 'mrf'))
.then(function (response) {
var data = response.data;
if (response.data.code == 200) {
_self.Monday = data.Monday/100
_self.Tuesday = data.Tuesday/100
_self.Wednesday = data.Wednesday/100
_self.Thursday = data.Thursday/100
_self.Friday = data.Friday/100
_self.Saturday = data.Saturday/100
_self.Sunday = data.Sunday/100
_self.Mondaycount = data.Mondaycount
_self.Tuesdaycount = data.Tuesdaycount
_self.Wednesdaycount = data.Wednesdaycount
_self.Thursdaycount = data.Thursdaycount
_self.Fridaycount = data.Fridaycount
_self.Saturdaycount = data.Saturdaycount
_self.Sundaycount = data.Sundaycount
_self.active = 2
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '金额'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
categories: ['星期一','星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '周数据',
data: [_self.Monday,_self.Tuesday, _self.Wednesday,
_self.Thursday, _self.Friday,
_self.Saturday, _self.Sunday
],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
var chart = Highcharts.chart('container1', {
chart: {
type: 'line'
},
title: {
text: '笔数'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
categories: ['星期一','星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '周数据',
data: [_self.Mondaycount,_self.Tuesdaycount, _self.Wednesdaycount,
_self.Thursdaycount, _self.Fridaycount,
_self.Saturdaycount, _self.Sundaycount
],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
}).catch(function (error) {
});
},
},
//默认为type=1 ---日数据
mounted () {
var post_data = {
method: 'trend.chart',
nonce: 'trend.chart',
id: data_id,
type:1
}
var _self = this;
axios.post('/api/v1', api_data_sign(post_data, 'mrf'))
.then(function (response) {
var data = response.data;
if (response.data.code == 200) {
_self.adata = data.adata/100//0-6
_self.bdata = data.bdata/100//6-9
_self.cdata = data.cdata/100//9-12
_self.ddata = data.ddata/100//12-15
_self.edata = data.edata/100//15-18
_self.fdata = data.fdata/100//18-21
_self.gdata = data.gdata/100//21-24
_self.acount = data.acount//0-6
_self.bcount = data.bcount//6-9
_self.ccount = data.ccount//9-12
_self.dcount = data.dcount//12-15
_self.ecount = data.ecount//15-18
_self.fcount = data.fcount//18-21
_self.gcount = data.gcount//21-24
_self.active = 1
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '金额'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
categories: [ '6', '9', '12', '15', '18', '21','24']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '小时',
data: [_self.adata, _self.bdata, _self.cdata, _self.ddata, _self.edata, _self.fdata, _self.gdata],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
var chart = Highcharts.chart('container1', {
chart: {
type: 'line'
},
title: {
text: '笔数'
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: '',
}
},
xAxis: {
categories: [ '6', '9', '12', '15', '18', '21','24']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
// pointStart: 1
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪，对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '笔数',
data: [_self.acount, _self.bcount, _self.ccount, _self.dcount, _self.ecount, _self.fcount, _self.gcount],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
}).catch(function (error) {
});
},
});现在是接口部分:
//提出需要调用的查询为方法,下面可进行调用
function days($starttime,$Endtime,$params){
$data =AccountLog::select('settle_logss.tube_id','account_logs.amount','account_logs.created_at')
->join('settle_logs','settle_logs.id','=','account_logs.order_id')
->join('users','settle_logs.user_id','=','users.id')
->where('account_logs.user_id',$params['id'])
->where('settle_logs.user_id','>',0)
->where('account_logs.created_at', '>=', $starttime)
->where('account_logs.created_at', '<', $Endtime);
return $data;
}
//日数据
if ($params['type']==1){
// 0-6的数据
$today = Carbon::today();
$starttime = date('Y-m-d H:i:s', strtotime($today));//今天的0:00开始
$aftertoday = $today->addHours(6);//增加6小时
$Endtime = date('Y-m-d H:i:s', strtotime($aftertoday));//6:00结束
$adata= days($starttime,$Endtime,$params)->sum('account_logs.amount');//这个时间段的金额总和
$acount= days($starttime,$Endtime,$params)->count();//这个时间段的交易笔数
// 6-9的数据
$today = Carbon::today();
$starttime = $Endtime ;//上面的结束时间点为开始时间
$aftertoday = $today->addHours(9);//增加9小时
$Endtime = date('Y-m-d H:i:s', strtotime($aftertoday));
$bdata= days($starttime,$Endtime,$params)->sum('account_logs.amount');//这个时间段的金额总和
$bcount= days($starttime,$Endtime,$params)->count();//这个时间段的交易笔数
//9-12的数据
$today = Carbon::today();
$starttime = $Endtime ;//上面的结束时间点为开始时间
$aftertoday = $today->addHours(12);//增加12小时
$Endtime = date('Y-m-d H:i:s', strtotime($aftertoday));
$cdata= days($starttime,$Endtime,$params)->sum('account_logs.amount');//这个时间段的金额总和
$ccount= days($starttime,$Endtime,$params)->count();//这个时间段的交易笔数
// 12-15的数据
$today = Carbon::today();
$starttime = $Endtime ;//上面的结束时间点为开始时间
$aftertoday = $today->addHours(15);//增加15小时
$Endtime = date('Y-m-d H:i:s', strtotime($aftertoday));
$ddata= days($starttime,$Endtime,$params)->sum('account_logs.amount');//这个时间段的金额总和
$dcount= days($starttime,$Endtime,$params)->count();//这个时间段的交易笔数
//15-18的数据
$today = Carbon::today();
$starttime = $Endtime ;//上面的结束时间点为开始时间
$aftertoday = $today->addHours(18);//增加18小时
$Endtime = date('Y-m-d H:i:s', strtotime($aftertoday));
$edata= days($starttime,$Endtime,$params)->sum('account_logs.amount');//这个时间段的金额总和
$ecount= days($starttime,$Endtime,$params)->count();//这个时间段的交易笔数
//18到21的数据
$today = Carbon::today();
$starttime = $Endtime ;//上面的结束时间点为开始时间
$aftertoday = $today->addHours(21);//增加21小时
$Endtime = date('Y-m-d H:i:s', strtotime($aftertoday));
$fdata= days($starttime,$Endtime,$params)->sum('account_logs.amount');//这个时间段的金额总和
$fcount= days($starttime,$Endtime,$params)->count();//这个时间段的交易笔数
// 21到24的数据
$today = Carbon::today();
$starttime = $Endtime ;//上面的结束时间点为开始时间
$aftertoday = $today->addHours(24);//增加24小时
$Endtime = date('Y-m-d H:i:s', strtotime($aftertoday));
$gdata= days($starttime,$Endtime,$params)->sum('account_logs.amount');//这个时间段的金额总和
$gcount= days($starttime,$Endtime,$params)->count();//这个时间段的交易笔数
return [
'status' => true,
'code' => '200',
'adata' => $adata,//0-6金额
'bdata' => $bdata,// 6-9的金额
'cdata' => $cdata,//9-12的金额
'ddata' => $ddata,//12-15的金额
'edata' => $edata,//15-18的金额
'fdata' => $fdata,//18-21的金额
'gdata' => $gdata,//21-24的金额
'acount' => $acount,//0-6笔数
'bcount' => $bcount,//6-9笔数
'ccount' => $ccount,//9-12笔数
'dcount' => $dcount,//12-15笔数
'ecount' => $ecount,//15-18笔数
'fcount' => $fcount,//18-21笔数
'gcount' => $gcount,//21-24笔数
];
}
//月数据
if ($params['type']==2){
// 1月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths =date('Y-m-d H:i:s', strtotime($startOfMonth));
$aftertoday = $startOfMonth->addMonth(1);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$January = days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Januarycount = days($startOfMonths,$Endmonth,$params)->count();
// 2月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(2);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$February= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Februarycount= days($startOfMonths,$Endmonth,$params)->count();
// 3月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(3);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$March= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Marchcount= days($startOfMonths,$Endmonth,$params)->count();
// 4月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(4);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$April= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Aprilcount= days($startOfMonths,$Endmonth,$params)->count();
// 5月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(5);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$May= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Maycount= days($startOfMonths,$Endmonth,$params)->count();
// 6月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(6);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$June= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Junecount= days($startOfMonths,$Endmonth,$params)->count();
// 7月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(7);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$July= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Julycount= days($startOfMonths,$Endmonth,$params)->count();
// 8月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(8);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$August= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Augustcount= days($startOfMonths,$Endmonth,$params)->count();
// 9月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(9);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$September= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Septembercount= days($startOfMonths,$Endmonth,$params)->count();
// 10月
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(10);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$October= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Octobercount= days($startOfMonths,$Endmonth,$params)->count();
//11yue
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$aftertoday = $startOfMonth->addMonth(11);
$Endmonth = date('Y-m-d H:i:s', strtotime($aftertoday));
$November= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Novembercount= days($startOfMonths,$Endmonth,$params)->count();
//12yue
$startOfMonth = Carbon::now()->startOfYear();
$startOfMonths = $Endmonth ;
$Endmonth = date('Y-m-d H:i:s', strtotime($startOfMonth));
$December= days($startOfMonths,$Endmonth,$params)->sum('account_logs.amount');
$Decembercount= days($startOfMonths,$Endmonth,$params)->count();
return[
'status' => true,
'code' => '200',
'January' =>$January,
'February' =>$February,
'March' =>$March,
'April' =>$April,
'May' =>$May,
'June' =>$June,
'July' =>$July,
'August' =>$August,
'September' =>$September,
'October' =>$October,
'November' =>$November,
'December' =>$December,
'Januarycount' =>$Januarycount,
'Februarycount' =>$Februarycount,
'Marchcount' =>$Marchcount,
'Aprilcount' =>$Aprilcount,
'Maycount' =>$Maycount,
'Junecount' =>$Junecount,
'Julycount' =>$Julycount,
'Augustcount' =>$Augustcount,
'Septembercount' =>$Septembercount,
'Octobercount' =>$Octobercount,
'Novembercount' =>$Novembercount,
'Decembercount' =>$Decembercount,
];
}
//周数据
if($params['type']==3){
//星期一
$time = Carbon::now()->startOfWeek();
$startOfWeek =date('Y-m-d H:i:s', strtotime($time));
$aftertoday = $time->addDays(1);
$EndWeek = date('Y-m-d H:i:s', strtotime($aftertoday));
$Monday = days($startOfWeek,$EndWeek,$params)->sum('account_logs.amount');
$Mondaycount = days($startOfWeek,$EndWeek,$params)->count();
//星期二
$time = Carbon::now()->startOfWeek();
$startOfWeek = $EndWeek ;
$aftertoday = $time->addDays(2);
$EndWeek = date('Y-m-d H:i:s', strtotime($aftertoday));
$Tuesday= days($startOfWeek,$EndWeek,$params)->sum('account_logs.amount');
$Tuesdaycount= days($startOfWeek,$EndWeek,$params)->count();
//星期三
$time = Carbon::now()->startOfWeek();
$startOfWeek = $EndWeek ;
$aftertoday = $time->addDays(3);
$EndWeek = date('Y-m-d H:i:s', strtotime($aftertoday));
$Wednesday= days($startOfWeek,$EndWeek,$params)->sum('account_logs.amount');
$Wednesdaycount= days($startOfWeek,$EndWeek,$params)->count();
//星期四
$time = Carbon::now()->startOfWeek();
$startOfWeek = $EndWeek ;
$aftertoday = $time->addDays(4);
$EndWeek = date('Y-m-d H:i:s', strtotime($aftertoday));
$Thursday= days($startOfWeek,$EndWeek,$params)->sum('account_logs.amount');
$Thursdaycount= days($startOfWeek,$EndWeek,$params)->count();
//星期五
$time = Carbon::now()->startOfWeek();
$startOfWeek = $EndWeek ;
$aftertoday = $time->addDays(5);
$EndWeek = date('Y-m-d H:i:s', strtotime($aftertoday));
$Friday= days($startOfWeek,$EndWeek,$params)->sum('account_logs.amount');
$Fridaycount= days($startOfWeek,$EndWeek,$params)->count();
//星期六
$time = Carbon::now()->startOfWeek();
$startOfWeek = $EndWeek ;
$aftertoday = $time->addDays(6);
$EndWeek = date('Y-m-d H:i:s', strtotime($aftertoday));
$Saturday= days($startOfWeek,$EndWeek,$params)->sum('account_logs.amount');
$Saturdaycount= days($startOfWeek,$EndWeek,$params)->count();
//星期天
$time = Carbon::now()->startOfWeek();
$startOfWeek = $EndWeek ;
$aftertoday = $time->addDays(7);
$EndWeek = date('Y-m-d H:i:s', strtotime($aftertoday));
$Sunday= days($startOfWeek,$EndWeek,$params)->sum('account_logs.amount');
$Sundaycount= days($startOfWeek,$EndWeek,$params)->count();
return[
'status' => true,
'code' => '200',
'Monday' =>$Monday,
'Tuesday' =>$Tuesday,
'Wednesday' =>$Wednesday,
'Thursday' =>$Thursday,
'Friday' =>$Friday,
'Saturday' =>$Saturday,
'Sunday' =>$Sunday,
'Mondaycount' =>$Mondaycount,
'Tuesdaycount' =>$Tuesdaycount,
'Wednesdaycount' =>$Wednesdaycount,
'Thursdaycount' =>$Thursdaycount,
'Fridaycount' =>$Fridaycount,
'Saturdaycount' =>$Saturdaycount,
'Sundaycount' =>$Sundaycount,
];
}总而言之，开发思路就是，我先从接口那边获取数据，分成三块判断 ：
type=1的时候，我查询的是日数据。日数据分为0-6,6-9,9-12,12-15,15-18,18-21,21-24这些时间段
type=2的时候，我查询的月数据。月数据分为一年中的一月到十二月。
扫描二维码关注公众号，回复：
3762219 查看本文章
type=3的时候，我查询的周数据。周数据分为周一到周日。
拿到数据之后，我在前台给三个日周月三个按钮绑定事件，对应的时间传对应的接口的type值，当点击按钮触发按钮的点击事件，就会调用接口，查询相关的数据。
这是我第一次使用这种方式去开发这个功能，有更好的方法或者有什么建议欢迎评论！
觉得有用的话，就点个赞吧！