ECharts显示24小时时间数据的一种办法

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实现数据的呈现，可以参考百度的文档和调试器进行调整，本文不在详序，有问题的朋友可以留言。