漏刻有时数据可视化Echarts组件开发(20):动态数据 + 时间坐标轴

//折线区域图;
function getHours(id) {
    var myChart = echarts.init(document.getElementById(id));
    var base = +new Date();
    var oneDay = 24 * 3600 * 1000;
    var date = [];
    var data = [Math.random() * 100];
    var now = new Date(base);
    function addData(shift) {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
        date.push(now);
        data.push((Math.random() + 1) * 10);//调整对应的数据，显示不同曲线;
        if (shift) {
            date.shift();
            data.shift();
        }
        now = new Date(+new Date(now) + oneDay);
    }
    for (var i = 1; i < 100; i++) {
        addData();
    }
    var option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return '当前在线人数：<br>' + parseFloat(params[0].value).toFixed(0) + '人'
            }
        },
        grid: {
            left: '2%',
            right: '4%',
            top: '15%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            show: false,
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,.6)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            }
        },
        yAxis: [{
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,.6)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            }
        }],
        series: [{
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 155, 5, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(24, 163, 64, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                color: '#c03518',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12
            },
            data: data
        }]
    };
    setInterval(function () {
        addData(true);
        myChart.setOption({
            xAxis: {
                data: date
            },
            series: [{
                name: '在线人数',
                data: data
            }]
        });
    }, 5000);
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}