Layui日期范围选择框+Echarts图表-获取选择所有日期

这几天做项目遇到个需求:默认情况下echarts柱状图x轴数据为今天(不含)至前7天的所有日期(年月日,/格式显示);在选择查询条件日期后x轴数据改为日期范围选择框所选的所有日期,范围不得超过31天。

解决思路:

        默认情况下:  1.获取今天日期;

                                2.根据遍历获取前7天内的所有日期;

                                3.初始化echarts渲染x轴。

        选择日期情况下:1.获取开始日期,结束日期;

                                     2.计算开始日期与结束日期相差天数;

                                     3.遍历获取开始与结束之间的所有日期;

                                     4.初始化echarts渲染x轴。

效果图:

默认情况效果图
layui范围日期选择框
根据日期选择框加载x轴数据

代码如下:

默认情况下
layui控制日期选择范围最多31天
有日期选择范围情况下

总结:

    每次需要更新echarts图表时都需要初始化;

    根据需要进行日期格式转换、切割;

    年、日根据需要补0.

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容