How to make echart x-axis type time to display a time period for one day

Question

I am using echarts and i am having problems when trying to make echarts display a time period of one day on the x-axis. Here is my code

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
        }
    ]
}

Here are the sample dates and historical data `

    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
    ]

`

The chart displays correctly but the x-axis spans from 31st December 2017 to 2nd January 2018, so that the results appear as a point instead of an area chart with two series data. Is there a way to tell echarts to begin and end the x-axis at a given time? or rather, How can i handle this?

Answer 1

xAxis.min, xAxis.max these two can be set to achieve that;

Check the documentation for xAxis.min and xAxis.max for more detail.

xAxis.minInterval can set the gap between axis labels, like one hour or one day.

And if you use type=time, you don't have to set data of Axis, just set series datas, axis range will auto set by given time, like:

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
        }
    ]
}

check this demo