如何使echart X轴类型的时间显示一天的时间段

Question

我正在使用echarts，尝试使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轴？或者更确切地说，我该如何处理？

Answer 1

xAxis.min，xAxis.max这两个可以设置为实现该目标；

检查这里更多的细节

xAxis.minInterval 可以设置轴标签之间的间隔，例如一小时或一天。

如果使用type=time，则不必设置Axis的数据，只需设置系列数据，轴范围将在给定时间自动设置，例如：

let historyRefuelling = [["2018-08-15T10:04:01.339Z",5],["2018-08-15T10:14:13.914Z",7]]

let historyTheft = [
    ["2018-08-15T10:04:01.339Z",1],[ "2018-08-15T10:14:13.914Z",2],[ "2018-08-15T10:40:03.147Z",3],[ "2018-08-15T11:50:14.335Z",4]
]

option =    {
    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');
                })
            }
        }
    ],
    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
        }
    ]
}

检查这个演示