我正在使用 echarts,但在尝试将一天的时间段显示在 X 轴上时遇到了问题。以下是我的代码:
this.area = {
color: ["#009C95","#21ba45"],
title : {
text: 'Fuel History',
textStyle: {
fontFamily: 'lato'
}
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type: 'time',
boundaryGap:false,
axisLabel: {
formatter: (function(value){
return moment(value).format('HH:mm');
})
},
data : dates
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
backgroundColor: '#4D86FF',
name:'Refuelling',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: historyRefuelling
},
{
name:'Fuel Theft',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: historyTheft
}
]
}
以下是样例日期和历史数据:``
let dates = [
"2018-08-15T10:04:01.339Z",
"2018-08-15T10:14:13.914Z",
"2018-08-15T10:40:03.147Z",
"2018-08-15T11:50:14.335Z",
"2018-08-15T12:04:05.655Z",
"2018-08-15T15:00:19.441Z"
]
let historyRefuelling = [1,1]
let historyTheft = [
1,1,1,1
]
图表显示正确,但X轴跨度从2017年12月31日到2018年1月2日,导致结果显示为点图而不是具有两个系列数据的面积图。是否有方法告诉echarts在指定时间开始和结束X轴? 或者说,我该如何解决这个问题?
dataZoom
选项,所有数据点都会成为一条垂直线(xAxis的值会转换为日期)。 - Chaitanya