ECharts3 实现动态数据累积图2+时间坐标

来源:互联网 发布:淘宝儿童保暖杯 编辑:程序博客网 时间:2024/06/04 18:35

这里写图片描述
对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。

可在ECharts3实例中的代码框中粘贴直接查看效果。

function randomData() {    now = new Date(+now + 1000);    value = value + Math.random() * 21 - 10;    return {        name: now.toString(),        value: [            now,            Math.round(value)        ]    }}var data = [];var now = new Date();var value = Math.random() * 1000;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    }]};setInterval(function () {        //data.shift();        data.push(randomData());    myChart.setOption({        series: [{            data: data        }]    });}, 1000);
原创粉丝点击