ECharts3 实现数据动态更新3+时间坐标,数据累积

代码修改自ECharts3文档异步数据加载和更新中的数据的动态更新部分,原示例固定显示若干数据,简单进行了修改,数据累积加上时间坐标。
是否累积数据的关键在于shift(),去掉shift()之后即累积数据。

其实ECharts3之后更新数据挺简单的,越来越清晰。
ECharts3 实现数据动态更新3+时间坐标,数据累积_第1张图片


var date = [];
var data = [Math.random() * 150];
var now = new Date();

function addData() {
    ss=now.getTime() % 60000
    seconds=ss = (ss - (ss % 1000)) / 1000
    now = [now.getHours(),now.getMinutes(),seconds].join(':');
    date.push(now);
    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
    now = new Date();
}

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        boundaryGap: [0, '20%'],
        type: 'value'
    },
    series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};

setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'成交',
            data: data
        }]
    });
}, 1000);

你可能感兴趣的:(ECharts)