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

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

var charts = {};
var x_series = [];
function createChart(id){
    $("div#we").append("
" class='m_echart' style='width:" + $("#page-wrapper").width() + "px;height:400px;'>
"
); 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 });            
        }) 
}

你可能感兴趣的:(工作日记)