echart加入dataZoom后无法正常显示数据

要用echart做一幅动态折线图。考虑到点可能会比较多，所以准备把dataZoom加进去。结果加入dataZoom后折线图不显示了。先看早先的代码。这个代码在加入dataZoom后无法正常显示折线图。

var charts = {};
var x_series = [];
function createChart(id){
    $("div#we").append("<div id=" + id + " class='m_echart' style='width:" + $("#page-wrapper").width() + "px;height:400px;'></div>");
    var myChart = echarts.init(document.getElementById(id));
    var tmp_ids = id.match(/\d+/g);
    var title = id;
    if(tmp_ids.length == 2){
        title = "插槽ID: " + tmp_ids[0] + " 接口Id: " + tmp_ids[1];
    }
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: title
        },
        dataZoom: {
            start: 80
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                return params.value[1] + " kbps";
            },
            axisPointer: {
                animation: false
            }            
        },             
        xAxis: {
            type: 'value',
            splitLine: {
                show: false
            },            
            data: x_series
        },
        yAxis: {
            name: 'kbps',
            nameGap: 20,
            nameTextStyle: {
                fontSize: 20
            },
            nameLocation: 'middle',
            type: 'value',
            splitLine: {
                show: false
            }            
        },
        series: [{
            name: '带宽',
            type: 'line'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);  
    charts[id] = myChart;
}
// 更新图像数据
function refreshChart(id){
    $.ajax({url: '/getBandwidth', type: 'get', data: {id: id}}).then(
        function(data){
            var id = data.id;
            // data.data中存的是一个array, 代表y轴的值
            charts[id].setOption({
                series: [{
                data: data.data
                }]
            });
        }, 
        function(XMLHttpRequest, textStatus, errorThrown){
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
            layer.msg('服务器离线', { icon: 7, time: 5000 });            
        }) 
}

对比了半天echart网站上的代码和我的代码，将数据更新重写了，然后就好了。看代码：

function refreshChart(id){
    $.ajax({url: '/getBandwidth', type: 'get', data: {id: id}}).then(
        function(data){
            var id = data.id;
            var tmp = [];
            for(var i in data.data){
                tmp.push({
                    value: [
                        i, data.data[i]
                    ]
                })
            }
            charts[id].setOption({
                series: [{
                data: tmp
                }]
            });
        }, 
        function(XMLHttpRequest, textStatus, errorThrown){
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
            layer.msg('服务器离线', { icon: 7, time: 5000 });            
        }) 
}