echarts实时曲线【转】

echarts官网上的动态加载数据bug被我解决

 

又是昨天，为什么昨天发生了这么多事。没办法，谁让我今天没事可做呢。

昨天需求是动态加载数据，画一个实时监控的折线图。大概长这样。

我屁颠屁颠的把代码copy过来，一运行，caocaocao~bug出现了。这难道是站长为了考研我？本着搬运工的精神，我开始百度起来。

最近可能百度忙着打官司，搜到的全是陈年烂谷。没办法，自己弄吧。可是项目主管不懂啊，他以为这个东西很简单嘛，网上一搜一大把，一个劲儿催。我就cltm了。但是问题还是要解决的。官网的错误代码我就不占了，有兴趣的可以到这里看http://echarts.baidu.com/demo.html#dynamic-data2

下面贴上我的代码，还有说明

1.首先官网上的代码没有实例化。

1	var myChart = echarts.init(document.getElementById('z_line2'));

2.核心配置bug就是这里，修改成这样就好了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

原版 setInterval(function () {       for (var i = 0; i < 5; i++) {         data.shift();         data.push(randomData());     }       myChart.setOption({         series: [{             data: data         }]     }); }, 1000); 我的 setInterval(function () {             for (var i = 0; i < 5; i++) {                 //data.shift();                 data.push(randomData());             }             //data.push(randomData());             myChart.setOption(option);//核心价值观，更快更高更强！         }, 1000);

最后附上完整的：

//开始❀折线图
function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
var option='';
/*for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}*/
data.push(randomData());
var myChart = echarts.init(document.getElementById('z_line2'));
option = {
    title: {
        bottom:0,
        left:'center',
        text: '现价',
        textStyle:{
            color:'#5e5e5e'
        }
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            console.log(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
        },
        nameGap:3600,
        axisLine: {lineStyle: {color: '#5e5e5e'}},
        axisLabel: {//坐标轴文本样式
            textStyle: {
                color: "#5e5e5e",
            },
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        },
        axisLine: {lineStyle: {color: '#5e5e5e'}},
        axisLabel: {//坐标轴文本样式
            textStyle: {
                color: "#5e5e5e",
            },
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }],
    dataZoom:{
        type:'inside'
    },
    backgroundColor:'#ccc'
};

setInterval(function () {
    for (var i = 0; i < 5; i++) {
        //data.shift();
        data.push(randomData());
    }
    //data.push(randomData());
    myChart.setOption(option);
}, 1000);