先展示下效果图，要完成的功能就是通过时间筛选功能，查到每个月的交易数据
点击右上角时间筛选
这就是要完成的功能
先引进的vue组件库的DatetimePicker 时间选择组件
接下来编写一个文本框，赋予一个id="time" 还有一个点击事件 @click="onclickIndex"：(这边命名随意取，只是用来渲染数据的时候弄来调用)
下一步，引入组件代码，这边为了效果，多引入了vant的另外一个组件，弹出层：
<van-popup v-model="show">内容</van-popup>
具体用法看手册：https://youzan.github.io/vant/#/zh-CN/intro
扫描二维码关注公众号，回复：
3762265 查看本文章
引入完毕后，代码如下：
首先，刚进入这个页面，这个时间筛选组件是隐藏的状态，V-model=show,因此，我们在vue的data return那边将show:false隐藏掉
这边介绍下confirm的方法
confirm(v){
var endvalue = new Date(v)
Y = endvalue.getFullYear() + '-';
M = (endvalue.getMonth()+1 < 10 ? '0'+(endvalue.getMonth()+1) : endvalue.getMonth()+1);
var time = $('#time').val(Y+M)//调用到input框的id，将时间的选择赋值到文本框
var time = $('#time').val()
this.show=false;//点击确认后，show=false，组件隐藏掉，值已经传过去了
var post_data2 = {
id:data_id,
method: 'month',//调取接口，后面讲
nonce: 'month',
time:time,
type:3//接口设的判断类型
};
var _self = this;
//下面是从后台接值，这边把接到的值渲染到图表上
axios.post('/api/v1', api_data_sign(post_data2, 'mrf'))
.then(function (response) {
var data = response.data;
var wechat = response.data.wechat;
var pay = response.data.pay;
var month = response.data.month;
var month_money = response.data.month_money;
var month_number = response.data.month_number;
var month_avg = response.data.month_avg;
if (response.data.code == 200) {
if(month_money==0){
$('#container1').hide()
$('.mrf-hide').show()
$('#container').hide()
_self.month_number = month_number;//月交易笔数
_self.month_money = month_money;//月交易金额
_self.month_avg = month_avg;//月交易均价
_self.wechat = wechat / self.month_number * 100;//微信百分比分布
_self.pay = pay / self.month_number * 100;//支付宝百分比分布
_self.month = month[0];//月中金额大小分布
return
}else {
$('#container1').show()
$('.mrf-hide').hide()
$('#container').show()
_self.month_number = month_number;//月交易笔数
_self.month_money = month_money;//月交易金额
_self.month_avg = month_avg;//月交易均价
_self.wechat = wechat / _self.month_number * 100;//微信百分比分布
_self.pay = pay / _self.month_number * 100;//支付宝百分比分布
_self.month = month[0];//月中金额大小分布
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: '通道交易占比'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f}% ',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
// console.log(_self.wechat)
var series = [{
type: 'pie',
name: '',
data: [
['微信', _self.wechat],
['支付宝', _self.pay],
// ['其他',50.0]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
var chart = {
type: 'column'
};
var title = {
text: '本月交易金额'
};
var subtitle = {
// text: 'Source: runoob.com'
};
var xAxis = {
categories: ['1~10', '11~50', '51~100', '101~500', '500+'],
crosshair: true
};
var yAxis = {
min: 0,
title: {
text: '数量'
}
};
var tooltip = {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} 笔</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
};
var plotOptions = {
column: {
pointPadding: 0.2,
borderWidth: 0
}
};
var credits = {
enabled: false
};
var series = [{
name: '本月',
data: [_self.month['1~10'], _self.month['11~50'], _self.month['51~100'], _self.month['101~500'], _self.month['500+']],
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container1').highcharts(json);
}
} else {
if (response.data.code == '005') {
this.login_check = false;
window.localStorage.removeItem('WIS_MRF.user');
this.$dialog.confirm({
title: '请重新登录',
message: response.data.msg
}).then(() => {
window.location.href = '../html/login.html';
}).catch(() => {
window.location.href = '../index.html';
});
}
}
}).catch(function (error) {
});
}这边提一下！从接口那边接到后台的数据后，渲染到柱状图和饼图，两个图都是用hightcharts.js(可见菜鸟教程)
下面说下后台接口读数据的处理，注释我会写在代码边上：
//type=3的时候，传入method下的data return里面 type=3，做的是下面的查询
if ($params['type']==3){
$time = $params['time'];
$atime = Carbon::createFromFormat('Y-m', $time)->startOfMonth();//laravel自带时间函数，月开始
$btime = Carbon::createFromFormat('Y-m', $time)->endOfMonth();//laravel自带时间函数，月结束
//查询筛选的这个月的交易笔数
$month_number = Order::select()
->where('user_id','=',$params['id'])
->whereBetween('orders.created_at', [$atime,$btime])//查询时间区间
->where('orders.pay_status','=','2')->count();
//查询筛选的这个月收益总和
$month_money = Order::select()
->where('user_id','=',$params['id'])
->whereBetween('orders.created_at', [$atime,$btime])//查询时间区间
->where('orders.pay_status','=','2')->sum('trade_amount');
//查询筛选的这个月均价
$month_avg = Order::select()
->where('user_id','=',$params['id'])
->whereBetween('orders.created_at', [$atime,$btime])//查询时间区间
->where('orders.pay_status','=','2')->avg('trade_amount');
//本月收益微信通道占比
$wechat = Order::select()
->where('user_id','=',$params['id'])
->join('channels','orders.channel_id','=','channels.id')
->join('tubes','channels.tube_id','=','tubes.id')
->whereBetween('orders.created_at', [$atime,$btime])//查询时间区间
->where('orders.pay_status','=','2')
->where('tubes.id','=','1')
->count();
//本月收益支付宝通道占比
$pay = Order::select()
->where('user_id','=',$params['id'])
->join('channels','orders.channel_id','=','channels.id')
->join('tubes','channels.tube_id','=','tubes.id')
->whereBetween('orders.created_at', [$atime,$btime])
->where('orders.pay_status','=','2')
->where('tubes.id','=','2')
->count();
$id = $params['id'];
//查询这个月所有金额的具体分布明细
$tj = " SELECT COUNT(CASE WHEN IFNULL(trade_amount,0) >=100.00 AND IFNULL(trade_amount,0)<=1000.00 THEN a.id END ) AS '1~10',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=1100.00 AND IFNULL(trade_amount,0)<=5000.00 THEN a.id END ) AS '11~50',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=5100 AND IFNULL(trade_amount,0)<=10000 THEN a.id END ) AS '51~100',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=10100.00 AND IFNULL(trade_amount,0)<=50000.00 THEN a.id END ) AS '101~500',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=50100.00 THEN a.id END ) AS '500+'
FROM orders AS a WHERE user_id = $id AND pay_status = '2' AND created_at >= '$atime' and created_at<='$btime' " ;
$month = DB::select(DB::raw($tj));
// dd($month);
return [
'status' => true,
'code' => '200',
'month_number' => $month_number,//月交易笔数
'month_money'=> fenToYuan($month_money),//月交易金额
'month_avg'=>fenToYuan($month_avg),//月交易均价
'wechat'=>$wechat,//微信占比
'pay'=>$pay,//支付宝占比
'month'=>$month//月交易金额大小分布
];
}
else{
//这边type不再是等于3，执行下面这些查询，只要在new的vue那边的data return type=''即可！
$startOfMonth = Carbon::now()->startOfMonth();
$endOfMonth = Carbon::now()->endOfMonth();
$today = Carbon::today();
//今日交易金额
$dataToday = Order::select()
->where('user_id','=',$params['id'])
->whereDate('orders.created_at', $today)
->where('orders.pay_status','=','2')
->sum('trade_amount');
//本月交易笔数
$month_number = Order::select()
->where('user_id','=',$params['id'])
->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth])
->where('orders.pay_status','=','2')->count();
//本月收益总和
$month_money = Order::select()
->where('user_id','=',$params['id'])
->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth])
->where('orders.pay_status','=','2')->sum('trade_amount');
//本月收益均价
$month_avg = Order::select()
->where('user_id','=',$params['id'])
->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth])
->where('orders.pay_status','=','2')->avg('trade_amount');
// dd($month_avg);
//本月收益微信通道占比
$wechat = Order::select()
->where('user_id','=',$params['id'])
->join('channels','orders.channel_id','=','channels.id')
->join('tubes','channels.tube_id','=','tubes.id')
->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth])
->where('orders.pay_status','=','2')
->where('tubes.id','=','1')
->count();
//本月收益支付宝通道占比
$pay = Order::select()
->where('user_id','=',$params['id'])
->join('channels','orders.channel_id','=','channels.id')
->join('tubes','channels.tube_id','=','tubes.id')
->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth])
->where('orders.pay_status','=','2')
->where('tubes.id','=','2')
->count();
$id = $params['id'];
//查询这个月所有金额的具体分布明细
$tj = " SELECT COUNT(CASE WHEN IFNULL(trade_amount,0) >=100.00 AND IFNULL(trade_amount,0)<=1000.00 THEN a.id END ) AS '1~10',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=1100.00 AND IFNULL(trade_amount,0)<=5000.00 THEN a.id END ) AS '11~50',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=5100 AND IFNULL(trade_amount,0)<=10000 THEN a.id END ) AS '51~100',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=10100.00 AND IFNULL(trade_amount,0)<=50000.00 THEN a.id END ) AS '101~500',
COUNT(CASE WHEN IFNULL(trade_amount,0) >=50100.00 THEN a.id END ) AS '500+'
FROM orders AS a WHERE user_id = $id AND DATE_FORMAT(created_at,'%Y%m') = DATE_FORMAT( CURDATE( ) ,'%Y%m') AND pay_status = '2'" ;
$month = DB::select(DB::raw($tj));
return [
'status' => true,
'code' => '200',
'month_number' => $month_number,//月交易笔数
'month_money'=> fenToYuan($month_money),//月交易金额
'month_avg'=>fenToYuan($month_avg),//月交易均价
'wechat'=>$wechat,//微信占比
'pay'=>$pay,//支付宝占比
'dataToday'=>fenToYuan($dataToday),//今日交易量
'month'=>$month//月交易金额大小分布
];
};我们通过两个type的值进行页面的渲染和method方法的调用，就可以进行时间筛选去获取某个月的数据。
其实难点在于怎么把值渲染到图表上，好在最后克服了！
欢迎私我交流！