引入 laydate 时间选择器 进行echart 统计图 的时间条件(月)筛选数据
1 laydate 组件的回调
通过laydate 选择日期时间时无法通过JQ的值改变时间来监听，但是可以通过JQ发方法进行获取值，很无语但是是这个组件的毛病，我试过很多次，所以它组件给力一个回调事件的方法帮我们实现选中日期的回调业务处理
//年月选择器
$(".laydate-date").each(function(){
var _this = this;
laydate.render({
elem: _this,
value:getTime(‘getMonth’),
type: ‘month’,
//用户选中日期的回调函数
done:function(value,date,endDate){
echartWeldmsTypeMon(date.year,date.month-1)
console.log(value)
console.log(date)
console.log(endDate)
}
});
});
2 获取月份最后一天的日期
与后台对接时是需要按照开始时间(精确到日的情况才能查询)，所以需要获取用户选择的月份的日期，这里我直接给代码
通过给方法进行传值，年份和月份即可
function getSearchMonth(selectYear,selectMonth) {
//格式化日期：yyyy-MM-dd
function formatDate(date) {
var myyear = date.getFullYear();
var mymonth = date.getMonth()+1;
var myweekday = date.getDate();
if(mymonth < 10){
mymonth = “0” + mymonth;
}
if(myweekday < 10){
myweekday = “0” + myweekday;
}
return (myyear+"-"+mymonth + “-” + myweekday);
}
//获得某月的天数
function getMonthDays(myMonth){
var monthStartDate = new Date(selectYear, myMonth, 1);
var monthEndDate = new Date(selectYear, myMonth + 1, 1);
var days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24);
return days;
}
//获得本月的开始日期
var getMonthStartDate = new Date(selectYear, selectMonth, 1);
var getMonthStartDate = formatDate(getMonthStartDate);
//获得本月的结束日期
var getMonthEndDate = new Date(selectYear, selectMonth, getMonthDays(selectMonth));
var getMonthEndDate = formatDate(getMonthEndDate);
console.log(“getMonthStartDate”,getMonthStartDate)
console.log(“getMonthEndDate”,getMonthEndDate)
}
3 echat的重绘
我们拿到相应的数据后，需要进行重绘，这里调用echat的setOption方法就可以了
这里的myChart就是var myChart = echarts.init(dom);时获取的元素
//进行月份筛选与画图的重绘
$.ajax({
//请求方式
type:‘POST’,
//发送请求的地址以及传输的数据
url:’’,
data:{,},
//服务器返回的数据类型
dataType:‘json’,
success:function(data){
var jsonstr = [];
myChart.setOption({ //加载数据图表
series : [
{
name:‘数量：’,
type:‘bar’,
barWidth: ‘60%’,
label: {
normal: {
show: true,
position: ‘top’,
textStyle: {
color: ‘#0c7bca’
}
}
},
data:jsonstr
}
]
});
}
});
来源：51CTO
作者：weixin_38136817
链接：https://blog.csdn.net/weixin_38136817/article/details/102724003