echarts报错

Question

使用echarts动态加载数据

$(function () {
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '动态数据'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 3, 0] // X轴的定义  
        }],
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '动态数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: [1, 2, 3, 4]
        }]
    }
    var data = [];
    setInterval(function () {
        for (var i = 0; i < 4; i++) {
            data.push(parseInt(Math.random() * 10));
        }
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }, 1000)
})

Answer 1

myChart.setOption(option);
var option = myChart.getOption();  
option.series[0].data = data;  
myChart.setOption(option);  

试试这样，首先可能需要先执行一个setOption，否则getOption是取不到的，刚刚我试了一下这样是可以得，但是有点奇怪，你可以看看~

Answer 2

定时器里的setOpition参数传错了

myChart.setOption({
    series: [{
        data: data
    }]
})

应该为：

option.series[0].data = data;
myChart.setOption(option)

xAxis 的 data 长度限制了X轴

Answer 3

为何个人尝试没有出错。
至于修改之后没有变化是因为x轴数据长度不足。

Answer 4

  setInterval(function () {
       var data = [];
    for (var i = 0; i < 4; i++) {
        data.push(parseInt(Math.random() * 10));
    }
  option.series[0].data = data;

myChart.setOption(option)

}, 1000)
这样写就好。
data.push() 插入数据。
所以只有第一秒边，之后就不会变。因为data数组中前四个数据没变