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

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

做项目的时候遇到一个问题，echarts在谷歌浏览器好好的，结果在IE浏览器x轴的数据不展示，当时x轴的数据是时间，也就是xAxis的 type 是 time。

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就不行。

所以解决办法是：

让后台返回时间戳，这样前端可以直接拿来用，不用做处理 前端自己处理一下拿到的这种字符串：‘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

这样的话echarts的x轴为 time 时在IE浏览器也能正常显示为一个时间轴了。

希望本文对你有所帮助！

当然现在IE浏览器被弃用了，希望大家永远不要再搞兼容IE了。