echarts x轴type=time 时 在IE中x轴不显示的问题解决

5 篇文章 0 订阅
1 篇文章 0 订阅

echarts官网有对x轴type的说明:
在这里插入图片描述
之前常用的是category,最近需要用time显示。
先看看x轴的显示设置:给一个初始时间值,一个结束时间值,然后给个最小间隔,echarts会自实现显示x轴的值:
在这里插入图片描述

然后发现有时候在Chrome上没有问题,结果到了IE上发现x轴不显示了。

上图中,如果max/min是时间戳,那么x轴的显示在Chrome和IE都是没有问题的。

如果是max/min是 new Date(timeString),timeString如果是 “2020/09/04 11:01:23” 这种格式,x轴的显示在Chrome和IE 也都是没有问题的。
timeString如果是 "2020-09-04 11:01:23" 这种格式,x轴的显示在Chrome没有问题,但在IE,是不行的。

为什么会这样呢?
在这里插入图片描述
在这里插入图片描述

看出来了吧:
new Date(‘2020/09/04 11:01:23’)在Chrome和IE都能生效,但是new Date(‘2020-09-04 11:01:23’)在Chrome没问题,在IE就不行。

所以解决办法是:

  1. 让后台返回时间戳,这样前端可以直接拿来用,不用做处理
  2. 前端自己处理一下拿到的这种字符串:‘2020-09-04 11:01:23’,改成’2020/09/04 11:01:23’
 let a = '2020-09-04 11:01:23';
 let b = a.replace(/\-/g, '/');
 console.log(b);  // 2020/09/04 11:01:23

在这里插入图片描述
希望本文对你有所帮助!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值