在vue项目中echars如何设置x轴为time时间轴?
将xAxis中的type值设为time,data并不用写,然后设置图表需要的时间范围即可。
代码展示:
- 在option定义外面设置时间范围,通过moment.js来格式化时间戳(时间制为24小时)
// 默认开始时间和结束时间 当天00点到23点59分
startValue = this.$moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
endValue = this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
2、在xAxis里面设置type为time,并设置时间范围(我设置的时间间隔是2小时,)
xAxis: {
type: 'time',
min:startValue,
max:endValue,
// 让x轴定位到顶部
position:'top',
// 设置刻度为2个小时: * 1000代表转为毫秒(1秒等于1000毫秒)
interval: 3600 * 1000 * 2,
// 是否显示分隔线
splitLine: {
show: true
}
},
3、具体效果