ECharts图表对X时间轴时间戳转换为年月日

原创已于 2023-06-09 15:07:55 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

于 2023-06-07 17:29:51 首次发布

文章提供了一个JavaScript函数`formatTime`，用于将ECharts图表中的时间轴时间戳转换为年月日格式。根据dataType参数，函数可以返回不同精度的时间表示。在ECharts的xAxis配置中，使用这个函数来格式化轴标签，并根据dataType设置时间间隔。

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

ECharts图表对X时间轴时间戳转换为年月日

参数说明：
dataType：时间类型，1：需要月日时分、2：需要年月日、3：需要月日_
timestamp：传入的时间戳

引入的转换时间的js文件

// 格式化时间
export const formatTime = (dataType, timestamp) => {
  let date = new Date(timestamp);
  let Y = date.getFullYear() + "-";
  let M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let h =
    " " +
    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
    ":";
  let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  let n =
    ":" +
    (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
  // 判断dataType类型
    if (dataType == 1) {
    return M + D + h + m;
  } else if (dataType == 2) {
    return  Y + M + D ;
  } else {
    return  M + D;
  }
};

echarts图标中使用

// 引入方法文件
import { formatTime } from "./timecopy";
// 使用方法
 xAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#797979",
        },
      },
      axisLabel: {
        color: "#67728C",
        fontSize: 12,
        formatter: (val) => {
          // 调用方法将时间戳转换成相应的时间格式
          return formatTime(type, val);
        },
      },
      min: time.min,//动态刻度最小值
      max: time.max,//动态刻度最大值
      interval://对刻度间隔进行均匀处理
        type == 1
          ? 1000 * 60 * 60 * 3 //3个小时一个点
          : type == 2
          ? 1000 * 60 * 60 * 24 // 1天一个点
          : type == 3
          ? 1000 * 60 * 60 * 24 * 3 //3天一个点
          : 0,
      //坐标轴两边留白策略
      // boundaryGap: true,
      splitLine: {
        show: false,
      },
    },