Vue 49 ，ECharts 5 ，JavaScript获取时间，获取前6年时间，获取前7天时间，展示Echart（ js中的String()、padStart()、new Date()方法）

北城笑笑

已于 2025-08-18 08:29:04 修改

阅读量4.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Echarts Vue 文章标签：前端 vue.js echarts

于 2023-04-10 19:17:27 首次发布

本文链接：https://blog.csdn.net/weixin_65793170/article/details/130051739

Vue 同时被 2 个专栏收录

90 篇文章

订阅专栏

Echarts

8 篇文章

订阅专栏

本文介绍JavaScript中new Date()方法的基本用法及如何获取当前时间的各种组件，并提供获取指定天数或年份前日期的实用函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我们在写 Echarts 的时候，难免会用到JavaScript中的 new Date() 方法，用来获取时间。new Date() 是 JavaScript 中用于创建日期对象的构造函数。它允许开发者创建表示特定时间点的日期和时间，支持多种格式和方法，使得处理时间和日期变得方便。

一. new Date()

1. 相关方法

关于new Date()的一些 JavaScript 方法，请看

  const nowDate = new Date();
  //中国标准时间
  console.log("1、", nowDate);  
  //获取完整的年份(4位,1970-????)
  console.log("2、", nowDate.getFullYear()); 
  //获取当前月份(0-11,0代表1月)
  console.log("3、", nowDate.getMonth());
  //获取当前日(1-31)
  console.log("4、", nowDate.getDate());
  //获取当前星期X(0-6,0代表星期天)
  console.log("5、", nowDate.getDay());
  //获取当前时间(从1970.1.1开始的毫秒数)，可以理解为时间戳
  console.log("6、", nowDate.getTime());
  //获取当前小时数(0-23)
  console.log("7、", nowDate.getHours());
  //获取当前分钟数(0-59)
  console.log("8、", nowDate.getMinutes());
  //获取当前秒数(0-59)
  console.log("9、", nowDate.getSeconds());
  //获取当前毫秒数(0-999)
  console.log("10、", nowDate.getMilliseconds());
  //获取当前日期
  console.log("11、", nowDate.toLocaleDateString());
  //获取当前时间
  console.log("12、", nowDate.toLocaleTimeString());
  //获取日期与时间
  console.log("13、", nowDate.toLocaleString());

2. 打印查看

二. 操作实例

1. 操作实例ONE

1. 逻辑函数

new Date()操作实例，获取前一段时间的日期，请看

// 定义一个函数 getPreviousDate，该函数接受一个参数 numOfDays，表示要回溯的天数
function getPreviousDate(numOfDays) {
  // 创建一个新的 Date 对象，表示当前日期和时间
  var date = new Date();
  // 使用 setDate 方法设置新的日期，减去 numOfDays 天
  // 注意：setDate 方法接受的值是从 1 开始的，因此这里实际上是获取过去的日期
  date.setDate(date.getDate() - numOfDays);
  // 获取新的日期中的年份部分
  var year = date.getFullYear();
  // 获取新的日期中的月份部分，注意 JavaScript 中月份是从 0 开始的，所以需要加 1
  var month = date.getMonth() + 1;
  // 获取新的日期中的日期部分
  var day = date.getDate();
  // 返回格式化的日期字符串，例如 "2023-09-15"
  // 注意这里没有检查 month 和 day 是否小于 10 并在前面补 0，
  // 如果需要标准的日期格式，应该加上相应的逻辑
  return year + "-" + month + "-" + day;
}


// 没有注释版
function getPreviousDate(numOfDays) {
  var date = new Date();
  date.setDate(date.getDate() - numOfDays);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return year + "-" + month + "-" + day;
}

如果你希望返回的日期格式总是 "YYYY-MM-DD" 形式（即月份和日期不足两位时前面补零），可以稍微修改一下返回的部分：

// ...
  // 返回格式化的日期字符串，例如 "2023-09-15"
  // 这里添加了对 month 和 day 的处理，确保它们都是两位数
  return year + "-" + (month < 10 ? '0' + month : month)
 + "-" + (day < 10 ? '0' + day : day);
// ...

这样，即使月份或日期是个位数，也会正确地显示为 "00" 形式。

2. 函数调用

函数调用，获取前7天的日期，请看

  var previousDate = getPreviousDate(7);
  console.log(previousDate); 
  // 输出：2023-4-3

上述代码中 getPreviousDate 函数用于获取前一段时间的日期，参数 numOfDays 表示需要获取的天数，然后利用 Date 对象的 setDate 方法来实现日期的计算，减去 numOfDays 天数即可获得前一段时间的日期，最后将年月日拼接成字符串并返回即可。假设今天是 2024年11月20日，那么调用 getPreviousDate(7) 会得到：

2024-11-13

3. 注意事项

1. 注意这里用到了setDate()方法，该方法用于实现日期的相加减，它接收一个整数，如果这个整数大于当前时间对象中月份的日期上线，则自动往前进位，余数为下个月的日期。

2. setDate()方法中的参数表示一个月中的一天的一个数值（1 ~ 31），0 为上一个月的最后一天，-1 为上一个月最后一天之前的一天，如果当月有 31 天，32 为下个月的第一天，如果当月有 30 天，32 为下一个月的第二天。

2. 操作实例TWO

获取前七天时间，前七天的所有时间，包括今天

function getLast7Days() {
  const dates = [];  // 用于存储日期的数组
  const today = new Date(); // 获取当前日期

  // 遍历过去7天
  for (let i = 1; i <= 7; i++) {  // 从1开始，避免获取今天
    const date = new Date(today); // 创建当前日期的副本
    date.setDate(today.getDate() - i); // 设置为当前日期减去i天，即获取过去的日期
    const year = date.getFullYear(); // 获取年份
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取并补零格式化月份
    const day = String(date.getDate()).padStart(2, "0"); // 获取并补零格式化日期
    const formattedDate = `${year}-${month}-${day}`; // 格式化日期为 YYYY-MM-DD
    dates.push(formattedDate); // 将格式化后的日期添加到数组中
  }

  return dates.reverse(); // 将数组反转，使日期从最早到最近排序
}

const last7Days = getLast7Days();  // 获取过去7天的日期
console.log(last7Days); // 输出过去7天的日期数组

示例输出：

假设今天是 2024年11月21日，调用 getLast7Days() 会输出如下数组：


[ "2024-11-14", "2024-11-15", "2024-11-16", "2024-11-17", "2024-11-18", 
"2024-11-19", "2024-11-20" ]

假设只要月日（Vue2）：

    data() {
        return {
            sevenDays: [],
        };
    },
       

    getLast7Days() {
            const dates = []; // 用于存储日期的数组
            const today = new Date(); // 获取当前日期

            // 遍历过去 7 天（不包括今天）
            for (let i = 1; i <= 7; i++) {
                const date = new Date(today); // 创建日期副本
                date.setDate(today.getDate() - i); // 当前日期减去 i 天

                const month = String(date.getMonth() + 1).padStart(2, "0"); // 月（补零）
                const day = String(date.getDate()).padStart(2, "0"); // 日（补零）

                dates.push(`${month}-${day}`); // 直接拼接成 "MM-DD"
            }
            // 反转数组，让日期从最早到最近
            this.sevenDays = dates.reverse();
            console.log(this.sevenDays, 1)
        },

示例输出：

['08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13']

过程描述：

用于存储日期的数组。
获取当前日期。
遍历过去 7 天（不含今天）。
创建当前日期的副本。
设置为当前日期减去 i 天，即获取过去的日期。
获取年份。
获取并补零格式化月份。
获取并补零格式化日期。
格式化日期为 YYYY-MM-DD。
将格式化后的日期添加到数组中。

这里的 String(...) 方法的作用：

将数字类型的值转换为字符串类型。确保后续操作支持字符串方法。
因为padStart 是字符串方法，不能直接在数字上调用，所以需要将数字转换为字符串。

这里padStart(2, "0")方法作用：

目标长度是 2，表示字符串的总长度应为两位。
用 "0" 作为填充字符。如果字符串长度小于 2，会在左侧补 "0"。
如果字符串已经是两位或更长，则不做任何改变。

String() 方法
String() 是一个全局函数，用于将任何值转换为字符串类型。

padStart() 方法
padStart() 是字符串的方法，用于通过在字符串的开头填充指定字符，使其达到指定长度。

方法介绍：

String() 方法
String() 是一个全局函数，用于将任何值转换为字符串类型。

padStart() 方法
padStart() 是字符串的方法，用于通过在字符串的开头填充指定字符，使其达到指定长度。

3. 操作实例THREE

获取前6年时间，请看

 function beforeSixYear() {
    const date = new Date().getUTCFullYear();
    const yearList = [];
    for (let i = 1; i <= 6; i++) {
      // console.log(i);
      yearList.push(date - i);
    }
    return yearList;
 };
 const sixYear = beforeSixYear()
 console.log(sixYear);
 // 输出: [2022, 2021, 2020, 2019, 2018, 2017]