ECharts3是一個超好用的圖表庫，在App中，我也讓團隊放棄原生元件，直接使用ECharts3.
我用ECharts主要是按天顯示採集的時間序列資料，並且需要固定展示24小時的資料。


通過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}}
    }]
};

把上面的程式碼貼到百度的例項的程式碼區域，就可以效果圖如下：

通過新增anchor的曲線，表格被撐開，橫座標顯示了24小時距離，資料可以通過data[i].value[0]定位到圖表中，data[i].name作為一個顯示資料點的日期資料，可以與data[i].value[0]保持一致。如果需要顯示滑鼠下的資料，需要利用formater實現資料的呈現，可以參考百度的文件和偵錯程式進行調整，本文不在詳序，有問題的朋友可以留言。