echarts折线图阴影+拐点设置+自动显示最近一周的日期+日期选择器选择日期之后会改变

最新推荐文章于 2024-02-07 10:56:46 发布

常安cc

最新推荐文章于 2024-02-07 10:56:46 发布

阅读量2.3k

点赞数 2

分类专栏： echarts 前端 js 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_55546349/article/details/122126457

版权

本文详细介绍了如何使用 Echarts 框架配置折线图，包括设置折线图的阴影效果，处理数据拐点，以及自动显示最近一周的日期。同时，还讲解了如何集成日期选择器，使得用户可以选择日期后实时更新图表展示。

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

在这里插入图片描述

<!-- 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