1. 程式人生 > >Echarts圖表座標軸動態展示兩個時間點之間的時間

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