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

最后附上完整的：