<!-- html-->
<div class="home_lef_weekly">
<!-- 上 -->
<div id="daterange" style="width: 190px;">
<input type="text" id="rangeTime" name="rangeTime" autocomplete="off" class="layui-input" placeholder="最近一周">
</div>
<!-- 下 -->
<div style="position:relative">
<div id="weekly_ech" style="width: 100%;height:380px;position: absolute;"></div>
</div>
</div>
let dateList;//D单周出入库统计日期数组
//自动显示本周日期
layui.use('laydate', function () {
let laydate = layui.laydate;
newWeek();//
//执行一个laydate实例
laydate.render({
elem: '#rangeTime',
type: 'date',
range: '--',
// format: 'yyyy-mm-dd',
value: (startDate) + " -- " + (endDate)
, done: function (value, date, endDatexx) {
// console.log(value);
var startsQuery = value.split('-').join("").split(" ")[0];//发送请求的日期格式"start":"20210901","end":"20210917"
var starts = value.split('--').join("").split(" ")[0];//
var endsQuery = value.split('-').join("").split(" ")[1];//发送请求的日期格式"start":"20210901","end":"20210917"
var ends = value.split('--').join("").split(" ")[1];
var secondDays = DateDiff(ends, starts) + 1;//总天数
var NewDate = getDate(value.split('--').join("").split(" ")[1]);
dateList = [];
for (let i = secondDays - 1; i >= 0; i--) {
dateList.push(formatDate(new Date(NewDate.getFullYear(), NewDate.getMonth(), NewDate.getDate() - i)));
// console.log(dateList);
};
// console.log(dateList);
option.xAxis.data = dateList;//讲选择的日期赋值给echarts中的数组
myChart.setOption(option);
// weeklyEcharts(dateList);
indexBoundStatis(loadHouseId(), startsQuery, endsQuery);//出入库统计的请求数据
}
});
});
function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2002-12-18格式
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split("-");
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为12-18-2002格式
aDate = sDate2.split("-");
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
return iDays
}
//单周出入库统计
var myChart = echarts.init(document.getElementById('weekly_ech'));
// 指定图表的配置项和数据
let option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['入库', '出库'],
position: 'right'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dateList//横轴数据
},
yAxis: {
type: 'value',
},
grid: [
{
left: '50',
right: 50,
top: 50,
},//改变了图标的大小与位置
],
series: [{
name: '入库',
type: 'line',
symbol: 'circle',//设定为实心点
symbolSize: 8,//拐点大小
data: [0, 0, 0, 0, 0, 0, 0],//入库数量
itemStyle: {
normal: {
color: '#3597fa',//拐点颜色
}
},
label: { show: true },//显示每个这点的数字
lineStyle: {
color: '#3764ff'//线条颜色3798FA
},
// smooth: true, //这句就是让曲线变平滑的
areaStyle: {
normal: {
color: 'rgba(55, 100, 255,.4)',//(阴影颜色)
}
}, //填充区域样式
},
{
name: '出库',
type: 'line',
symbol: 'circle',//设定为实心点
symbolSize: 8,//拐点大小
data: [0, 0, 0, 0, 0, 0, 0],//出库数量
itemStyle: {
normal: {
color: '#00E381',//折线颜色
}
},
label: { show: true },
lineStyle: {
color: '#00E381'//折线颜色
},
// smooth: true, //这句就是让曲线变平滑的
areaStyle: {
normal: {
color: 'rgba(0, 227, 129,.4)',//(阴影颜色)
}
}, //填充区域样式
}
]
};
myChart.setOption(option, true);
//日期格式化
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 newWeek() {
startDate = formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6));
secDate = formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 5));
thrDate = formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 4));
fDate = formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 3));
fiveDate = formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 2));
sixDate = formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1));
endDate = formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
dateList = [startDate, secDate, thrDate, fDate, fiveDate, sixDate, endDate];
};
//字符串转日期格式，strDate要转为日期格式的字符串
function getDate(strDate) {
var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,
function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
return date;
}
//格式化日期
function getTime(time = +new Date()) {
var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
return date.toJSON().substr(0, 19).replace('T', ' ');
};
//单周出入库数据统计
function indexBoundStatis(houseId, start, end) {
var _this = this;
var data = {
fn: "xxx",
md: "xxx",
data: {
warehouseCode: houseId,//仓库代号
start: start,//开始日期
end: end//结束日期
}
}
httpRequestPost("/MngServlet", data, function (res) {
// console.log(res);
// console.log(dateList);
if (res.rt == 0) {
var item = res.data;
var inlist = [];
var outlist = [];
option.series[0].data = [];//清空原来的数值
option.series[1].data = [];//清空原来的数值
for (let j = 0; j < dateList.length; j++) {
inlist[j] = 0;
outlist[j] = 0;
};
//去判断请求到的日期与选择的日期，如果相等，则把数据赋值给对应下标的数组中
for (let i = 0; i < dateList.length; i++) {
for (let x = 0; x < item.l.length; x++) {//循环第一个入库数组
if (item.l[x].day == dateList[i].split('-').join("")) {
inlist[i] = item.l[x].count;
// console.log(inlist);
}
}
for (let y = 0; y < item.r.length; y++) {//循环第一个入库数组
if (item.r[y].day == dateList[i].split('-').join("")) {
outlist[i] = item.r[y].count;
// console.log(outlist);
}
}
};
option.series[0].data = inlist;//清空原来的数值
option.series[1].data = outlist;//清空原来的数值
myChart.setOption(option);
// weeklyEcharts(dateList,inlist,outlist);//调用
} else {
layer.msg(res.msg);
}
})
};
//resize---echarts
window.onresize = function () {
// if(myChart0 || myChart){
setTimeout(function () {
myChart.resize()
myChart0.resize()
})
// }
}
版权声明：本文为m0_55546349原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。