前端实现无限点击前一周后一周前几个月后几个月

最新推荐文章于 2023-12-04 21:45:00 发布

前端cv大师

最新推荐文章于 2023-12-04 21:45:00 发布

阅读量248

点赞数

文章标签： echarts javascript html

本文链接：https://blog.csdn.net/pengboran/article/details/120062492

版权

本文介绍了如何使用ECharts实现动态切换数据，支持展示前一周、本周和后一周的数据，以及如何扩展到前几个月、后几个月和前后一年的时间范围。通过getDates和addDate函数处理日期，适合项目中需要实时更新图表的需求。

摘要由CSDN通过智能技术生成

项目需要实现点击时间切换echarts 数据记录一下
1.实现前一周本周后一周

		// 处理日期
			getDates(date) {
				var year = date.getFullYear() + '-'
				var month = ((date.getMonth() + 1) + '-').length === 2 ? ('0' + (date.getMonth() + 1) + '-') : (date
					.getMonth() + 1) + '-'
				var day = (date.getDate() + '').length === 1 ? ('0' + date.getDate()) : date.getDate()
				this.timeStamp.push(year + month + day)
				return year + month + day
			},
			// 设置日期
			addDate(date, n) {
				date.setDate(date.getDate() + n)
				return date
			},
			setDate(date) {
				this.timeStamp = []
				var week = date.getDay() - 1
				date = this.addDate(date, week * -1)
				this.currentFirstDate = new Date(date)
				for (var i = 0; i < 7; i++) {
					this.getDates(i === 0 ? date : this.addDate(date, 1)) // 星期一开始
				}
			},

上一周：

		lastWeek() {
				this.setDate(this.addDate(this.currentFirstDate, -7))
				this.startTime_line = this.timeStamp[0]
				this.endTime_line = this.timeStamp[6]
			},

下一周：

			nextWeek() {
				this.setDate(this.addDate(this.currentFirstDate, 7))
				this.startTime_line = this.timeStamp[0]
				this.endTime_line = this.timeStamp[6]
			},

本周：

			onWeek() {
				this.setDate(this.addDate(new Date(), -1))
			},

1.前几个月后几个月
前三个月：

	// 前三个月
			GetPreMonthDay(date, monthNum) {
				var dateArr = date.split('-');
				var year = dateArr[0]; //获取当前日期的年份
				var month = dateArr[1]; //获取当前日期的月份
				var day = dateArr[2]; //获取当前日期的日
				var days = new Date(year, month, 0);
				days = days.getDate(); //获取当前日期中月的天数
				var year2 = year;
				var month2 = parseInt(month) - monthNum;
				if (month2 <= 0) {
					var absM = Math.abs(month2);
					year2 = parseInt(year2) - Math.ceil(absM / 12 == 0 ? 1 : parseInt(absM) / 12);
					month2 = 12 - (absM % 12);
				}
				var day2 = day;
				var days2 = new Date(year2, month2, 0);
				days2 = days2.getDate();
				if (day2 > days2) {
					day2 = days2;
				}
				if (month2 < 10) {
					month2 = '0' + month2;
				}
				if (day2 < 10) {
					day2 = '0' + day2;
				}
				var t2 = year2 + '-' + month2 + '-' + day2;
				this.startTime = t2
				this.endTime = date
			},

调用方式
let data = ‘2021-05-12’
GetPreMonthDay(data , 3) 从5.12号往前推3个月
后几个月：

			GetNextMonthDay(date, monthNum) {
				var dateArr = date.split('-');
				var year = dateArr[0]; //获取当前日期的年份
				var month = dateArr[1]; //获取当前日期的月份
				var day = dateArr[2]; //获取当前日期的日
				var days = new Date(year, month, 0);
				days = days.getDate(); //获取当前日期中的月的天数
				var year2 = year;
				var month2 = parseInt(month) + parseInt(monthNum);
				if (month2 > 12) {
					year2 = parseInt(year2) + parseInt((parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12));
					month2 = parseInt(month2) % 12;
				}
				var day2 = day;
				var days2 = new Date(year2, month2, 0);
				days2 = days2.getDate();
				if (day2 > days2) {
					day2 = days2;
				}
				if (month2 < 10) {
					month2 = '0' + month2;
				}
				if (day2 < 10) {
					day2 = '0' + day2;
				}
				var t2 = year2 + '-' + month2 + '-' + day2;
				this.startTime = date
				this.endTime = t2
			},

调用方式同前几个月 GetNextMonthDay(data, 3)

3.前一年后一年

			// 前一年 后一年 
			getYear(type, dates, time) {
				if (time) {
					var dd = new Date(time);
				} else {
					var dd = new Date();
				}
				var n = dates || 0;
				var year = dd.getFullYear() + Number(n);
				if (type == "s") {
					var day = year + "-01-01";
				};
				if (type == "e") {
					var day = year + "-12-31";
				};
				if (!type) {
					var day = year + "-01-01/" + year + "-12-31";
				};
				return day;
			},