echarts官網上的動態加載數據bug被我解決。咳咳/。

又是昨天，為什么昨天發生了這么多事。沒辦法，誰讓我今天沒事可做呢。

昨天需求是動態加載數據，畫一個實時監控的折線圖。大概長這樣。

我屁顛屁顛的把代碼copy過來，一運行，caocaocao~bug出現了。這難道是站長為了考研我？本着搬運工的精神，我開始百度起來。

最近可能百度忙着打官司，搜到的全是陳年爛谷。沒辦法，自己弄吧。可是項目主管不懂啊，他以為這個東西很簡單嘛，網上一搜一大把，一個勁兒催。我就cltm了。但是問題還是要解決的。官網的錯誤代碼我就不占了，有興趣的可以到這里看http://echarts.baidu.com/demo.html#dynamic-data2

下面貼上我的代碼，還有說明

1.首先官網上的代碼沒有實例化。

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

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

原版
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);