javascript 如何让echart x轴类型时间显示一天的时间段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51861846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make echart x-axis type time to display a time period for one day
提问by Geoffrey Kimani
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
我正在使用 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
}
]
}
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?
图表显示正确，但 x 轴跨越 2017 年 12 月 31 日至 2018 年 1 月 2 日，因此结果显示为一个点，而不是包含两个系列数据的面积图。有没有办法告诉 echarts 在给定时间开始和结束 x 轴？或者更确切地说，我该如何处理？
回答by Ian Zhong
xAxis.min, xAxis.maxthese two can be set to achieve that;
xAxis.min，xAxis.max可以设置这两个来实现；
check herefor more detail
检查这里更多的细节
xAxis.minIntervalcan set the gap between axis labels, like one hour or one day.
xAxis.minInterval可以设置轴标签之间的间隔，例如一小时或一天。
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:
如果使用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
}
]
}
check this demo
检查这个演示
