ECharts顯示24小時時間數據的一種辦法

ECharts3是一個超好用的圖表庫,在App中,我也讓團隊放棄原生組件,直接使用ECharts3.

我用ECharts主要是按天顯示采集的時間序列數據,並且需要固定展示24小時的數據。

顯示24小時的數據1

顯示24小時的數據2

通過ECharts3的時間軸,我們可以把一個采集的設備數據呈現在圖上面,可是如何漂亮呈現固定的24小時的數據,筆者是通過對ECharts的文檔,做出瞭上圖的效果。

為什麼需要呈現24小時的數據呢?通過24小時的數據呈現,人可以很容易發現一天中的數據的規律,比如天氣數據就是按天呈現的。

EChart3的動態數據就是一個時間相關的例子

本文主要介紹ECharts3中xAxis.type=’time’時的使用方法,介紹的例子可以通過前面的例子鏈接,修改演示代碼的data即可實現代碼測試。

‘time’ 時間軸,適用於連續的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度。

要實現24小時固定的橫坐標,通過設定坐標軸的范圍是沒有辦法實現的(或者有bug,通過設定范圍的方式,我發現會存在一個零界點不能正確顯示圖表)。

實現24小時時間數據的方法是:

添加一個時間起點為0點,時間終點為次日0點的serias(一條曲線),並把曲線添加到圖標中;同時,修改曲線的顏色為透明色,還有自定義一個格式化器,不顯示這條我稱為“錨”的曲線。

下面給出演示代碼:

var data = [
    {name:'2016/12/18 6:38:08', value:['2016/12/18 6:38:08', 80]},
    {name:'2016/12/18 16:18:18', value:['2016/12/18 16:18:18', 60]},
    {name:'2016/12/18 19:18:18', value:['2016/12/18 19:18:18', 90]}
    ];
var anchor = [
    {name:'2016/12/18 00:00:00', value:['2016/12/18 00:00:00', 0]},
    {name:'2016/12/19 00:00:00', value:['2016/12/19 00:00:00', 0]}
    ];

option = {
    title: {
        text: '動態數據 + 時間坐標軸'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模擬數據',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    },
    {
        name:'.anchor',
        type:'line', 
        showSymbol:false, 
        data:anchor,
        itemStyle:{normal:{opacity:0}},
        lineStyle:{normal:{opacity:0}}
    }]
};

把上面的代碼貼到百度的實例的代碼區域,就可以效果圖如下:

24小時實例圖樣

通過添加anchor的曲線,表格被撐開,橫坐標顯示瞭24小時距離,數據可以通過data[i].value[0]定位到圖表中,data[i].name作為一個顯示數據點的日期數據,可以與data[i].value[0]保持一致。如果需要顯示鼠標下的數據,需要利用formater實現數據的呈現,可以參考百度的文檔和調試器進行調整,本文不在詳序,有問題的朋友可以留言。

發佈留言