echart表格中日期格式化

使用echart表格显示数据,但是后台提供的时间为13位时间戳,显示在表格中也是时间戳,将时间戳转化为YYYY-MM-DD HH-MM-SS时间格式如下:
参考几种方法:

element-ui 表格数据时间格式化的方法
vue element-ui表格里时间戳转换成时间显示
vue 下使用element表单时间戳转日期
vue + element表格 时间戳转换

试错过程
方法①在vue中使用会报*.replace()*方法不是一个方法,应该是无法将链式结构识别出来,具体的原因我还没有找出来,有时间再看一下。
方法②是管用的,但是转换结果不标准,当数字为个位数时没有补0,与一系列数据放在一起会很不美观。
方法③使用了Moment工具库,我在导入库的时候失败了很多次,导致无法使用moment()方法,如果可以用的话将会非常简单。
方法④没有使用element-ui中表格的formatter方法,而是单独写了一个filter,不过里面的语法是没有问题的。
最终结果
我结合项目特点将方法③和方法④综合起来实现了时间格式化,以下为代码:

<el-table-column
      prop="checkTime"
      header-align="center"
      label="检测时间"
      show-overflow-tooltip
      width="200"
      align="center"
      :formatter="dateFormat"
></el-table-column>

注意
这个问题实在是错了还多太多太多遍了
写方法前面一定要加冒号!!!
写方法前面一定要加冒号!!!
写方法前面一定要加冒号!!!

下面的方法写在方法里面:

dateFormat(row, column) {
      var date = new Date(row.checkTime);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var d =
        date.getDate() < 10
          ? "0" + (date.getDate() + " ")
          : date.getDate() + " ";
      var h =
        date.getHours() < 10
          ? "0" + (date.getHours() + ":")
          : date.getHours() + ":";
      var m =
        date.getMinutes() < 10
          ? "0" + (date.getMinutes() + ":")
          : date.getMinutes() + ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + d + h + m + s;
    }

JavaScript Date 对象

转换后的表现
2020-2-12 16:49:28

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts是一个用于可视化数据的JavaScript库,其提供了丰富的图表类型和灵活的配置选项,使用户可以轻松地将数据转化为易于理解和分析的图形形式。 对于Echarts的series(系列)数据,如果其的时间数据不希望以默认格式显示,我们可以通过对时间数据进行格式化来实现自定义显示。 首先,需要确定series的时间数据的类型,常见的有时间戳类型和字符串类型。对于时间戳类型的数据,我们可以通过JavaScript的Date对象对其进行格式化。例如,可以使用toDateString()函数将时间戳转化为字符串格式的日期表示。 若时间数据为字符串类型,则我们可以基于字符串的长度和格式,使用substring()、slice()、replace()等字符串方法来进行格式化。例如,假设时间字符串的格式为"YYYY-MM-DD hh:mm:ss",我们可以通过substr()方法提取出相应的年月日时分秒,并通过自定义的方式拼接成新的字符串格式。 在对时间数据进行格式化之后,将格式化后的数据赋给相应的series的时间字段即可。重新渲染图表时,该时间字段将以我们定义的格式进行显示。 需要注意的是,Echarts还提供了针对时间轴的进一步操作和配置选项,包括时间范围、时间间隔等等,可以根据实际需求进行相应的设置和调整。 通过以上的方法,可以实现对Echarts系列数据时间字段的自定义格式化,使得图表的时间信息更加符合自己的需求和展示要求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值