echarts下拉列表切换数据（二）

在（一）中，虽然已经实现了每次切换都重新渲染echarts，但有个问题，就是每次切换都会发起ajax请求，而且请求的都是同一个json文件，这显然是不合理的。

对此，我们可以在页面一加载的时候就发起请求，并把返回值作为一个全局变量存起来。代码如下：

var myChart = echarts.init(document.getElementById('home'), 'walden');
var res;

$.ajax({
    url: 'data/test.json',
    type: 'get',
    success: function(response) {
        res = response;
        $('#select').trigger('change');
    }
});

$('#select').on('change', function() {
    var val = $(this).val();
    var xData = [];
    var yData = [];
    for (var i = 0; i < 8 - val; i++) {
        xData.push(res.rows[i].by_value.slice(5));
    }
    for (var n = 0, m = val; n < 8 - val; n++) {
        yData.push(res.rows[n].cells[m].percent);
    }
    myChart.setOption({
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
        },
        tooltip: {},
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '最高气温',
            type: 'line',
            data: yData
        }]
    });
});