在(一)中,虽然已经实现了每次切换都重新渲染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
}]
});
});