如何让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这两个可以通过设置来实现；

查看here了解更多详情

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

如果你使用type=time，你不需要设置轴的数据，只需设置系列数据，轴范围将按给定时间自动设置，如：

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

检查这个 demo

如何让echart x轴类型时间显示一天的时间段

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

javascript

charts

echarts

baidu