echartsX轴时间轴固定显示当天0-24小时
- 时间格式化使用moment.js,按需求添加,如不需要请手动格式化至相应格式
npm install moment --save
- 获取当天起始时间
moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') // 格式化为 2022-12-30 00:00:00 格式
- 获取当天结束时间
moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') // 格式化为 2022-12-30 23:59:59 格式
option = {
xAxis: {
show: true,
type: "time", // 这里使用时间轴模式
axisLabel: {
// 格式化x轴显示
formatter: function(value, index) {
// 如果时间是 23:59:59 , 格式化为 24:00
if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
return moment(value).format("24:00");
} else {
// 其他的时间返回格式化 00:00
return moment(value).format("HH:mm");
}
}
},
interval: 3600 * 2 * 1000, // 设置x轴分隔间隔,我使用的是毫秒时间戳间隔两小时,如使用秒时间戳不需要x1000
min: function (value) {
// 设置x轴最小值,为当天00:00:00时时间戳
// 若想要将time改为x轴数据最小值,则var time = moment(value.min).format('YYYY-MM-DD HH:mm:ss');
var time = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
return new Date(time).getTime();
},
max: function (value) {
// 设置x轴最大值,为当天23:59:59时时间戳
// 若想要将time改为x轴数据最大值,则var time = moment(value.max).format('YYYY-MM-DD HH:mm:ss');
var time = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
return new Date(time).getTime();
}
},
series: [{
name: "测试用例",
type: "line",
data: [[1672329600000, 1], [1672333200000, 2], [1672336800000, 3], [1672340400000, 4], [1672344000000, 5], [1672347600000, 6], [1672351200000, 7]] // 测试用例数据,格式为[时间戳, 数据]
}]
}