Echarts图表坐标轴动态展示两个时间点之间的时间
Echarts图表坐标轴动态展示两个时间点之间的时间
初始折线图样式
以下是配置项设置：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
更改后折线图样式
图中所示，X轴的坐标的时间是可以根据你返回的数据动态调节的，时间数据间隔长，页面上也会对应显示相应的间隔 ，不会因为没有数据而影响。
更改之后的配置项配置：
option = {
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
"value": [
"2018-10-11",
4
]
},
{
"value": [
"2018-10-12",
4
]
},
{
"value": [
"2018-10-15",
4
]
},
{
"value": [
"2018-10-16",
4
]
},
{
"value": [
"2018-10-18",
1
]
},
{
"value": [
"2018-10-19",
1
]
},
{
"value": [
"2018-10-20",
1
]
},
{
"value": [
"2018-10-24",
1
]
},
{
"value": [
"2018-10-30",
1
]
},
{
"value": [
"2018-10-31",
1
]
},
{
"value": [
"2018-11-01",
1
]
},
{
"value": [
"2018-11-23",
-12.96
]
}
],
type: 'line'
}]
};