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

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

其实ECharts3之后更新数据挺简单的,越来越清晰。
这里写图片描述


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);
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值