本文介绍ECharts中x轴设置为time类型时的配置方法，重点讲解如何动态获取数据中的最大和最小时间值，并设置xAxis的min和max属性。通过遍历数据生成二维数组形式的series data，实现时间轴的正确显示与缩放。
x轴设置为'time'类型时的格式配置方法
将x轴的type属性设为time，此时无需手动转换X轴显示的文字。通常还需要定义x轴的起始范围，数据格式示例如下
max: "2021-01-04 08:24:38" ， min: "2021-01-04 08:14:36"接着，series中的data也应设置为二维数组类型，例如
[ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56] ]具体实现代码如下
option = {
xAxis: {
type: 'time',
min: "2021-01-04 08:14:36",
max: "2021-01-04 08:24:38",
},
yAxis: {
type: 'value',
},
series: [
{
data: [ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56],["2021-01-04 08:20:46", 23],["2021-01-04 08:22:46", 40] ],
type: 'line'
}
]
};动态获取时间范围数据
显然，我们需要处理两部分内容
（1）获取数据中的最大（max）和最小（min）时间值；（2）构建时间和数据对应的二维数组。
我们可以通过for循环遍历原始数据来获取
（1）所有的日期信息；（2）series所需的二维数组：[时间戳，数据值]
for (let i = 0; i < TotalData.length; i++) {
dateData[i] = TotalData[i].date;//获取时间
seriesData[i] = [TotalData[i].date,TotalData[i].value];//获取数据的二维数组
}随后利用打擂台比较算法，计算出最大（max）和最小（min）的日期
//选出最大和最小日期
var maxDateStr = '0001/01/01';
var minDateStr = '9999/12/31';
var maxDate = new Date(maxDateStr);
var minDate = new Date(minDateStr);
for (let i = 0; i < dateData.length; i++) {
dateData[i] = dateData[i].replace(/-/g,"/")
var tempDate = new Date(dateData[i])
console.log(tempDate)
if(tempDate>maxDate) maxDate = tempDate;
if(tempDate<minDate) minDate = tempDate;
}这样便获得了所需的数据，可以进行后续设置。
效果图展示
总结
到此这篇关于ECharts x轴为time用法的文章就介绍到这了，更多相关ECharts x轴为time用法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！