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

Posted 2023-03-25

【中文标题】如何让echart x轴类型时间显示一天的时间段

【英文标题】：How to make echart x-axis type time to display a time period for one day

【发布时间】：2018-08-15 15:33:52

【问题描述】：

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

【参考方案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

【讨论】：

@IanZhong 但如果我们使用dataZoom 选项，所有数据点都将作为一条垂直线出现（xAxis 值正在转换为日期）。