HTML代码
<select id="select">
<option value="7">第7天</option>
<option value="6">第6天</option>
<option value="5">第5天</option>
<option value="4">第4天</option>
<option value="3">第3天</option>
<option value="2">第2天</option>
<option value="1">第1天</option>
</select>
<div id="home" style="width: 600px; height: 400px"></div>
Javascript代码
var myChart = echarts.init(document.getElementById('home'));
$(function() {
$('#select').on('change', function() {
var val = $(this).val();
_ajax(8-val);
});
});
function _ajax(len) {
$.ajax({
url: 'data/test.json',
type: 'get',
success: function(res) {
var xData = [];
var yData = [];
for (var i = 0; i < len; i++) {
xData.push(res.rows[i].by_value.slice(5));
}
for (var n = 0, m = 8-len; n < len; 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
}]
});
}
});
}
test.json
{
"by_field": "",
"has_first_day": true,
"rows": [
{
"by_value": "2017-06-07",
"total_people": 4510,
"cells": [
{
"people": 4294,
"percent": 95.21
},
{
"people": 453,
"percent": 10.04
},
{
"people": 435,
"percent": 9.65
},
{
"people": 420,
"percent": 9.31
},
{
"people": 399,
"percent": 8.85
},
{
"people": 422,
"percent": 9.36
},
{
"people": 376,
"percent": 8.34
},
{
"people": 360,
"percent": 7.98
}
]
},
{
"by_value": "2017-06-08",
"total_people": 4781,
"cells": [
{
"people": 4564,
"percent": 95.46
},
{
"people": 537,
"percent": 11.23
},
{
"people": 420,
"percent": 8.78
},
{
"people": 443,
"percent": 9.27
},
{
"people": 447,
"percent": 9.35
},
{
"people": 421,
"percent": 8.81
},
{
"people": 385,
"percent": 8.05
}
]
},
{
"by_value": "2017-06-09",
"total_people": 4809,
"cells": [
{
"people": 4601,
"percent": 95.67
},
{
"people": 487,
"percent": 10.13
},
{
"people": 445,
"percent": 9.25
},
{
"people": 450,
"percent": 9.36
},
{
"people": 420,
"percent": 8.73
},
{
"people": 384,
"percent": 7.99
}
]
},
{
"by_value": "2017-06-10",
"total_people": 4587,
"cells": [
{
"people": 4373,
"percent": 95.33
},
{
"people": 519,
"percent": 11.31
},
{
"people": 431,
"percent": 9.4
},
{
"people": 350,
"percent": 7.63
},
{
"people": 345,
"percent": 7.52
}
]
},
{
"by_value": "2017-06-11",
"total_people": 4627,
"cells": [
{
"people": 4419,
"percent": 95.5
},
{
"people": 523,
"percent": 11.3
},
{
"people": 438,
"percent": 9.47
},
{
"people": 375,
"percent": 8.1
}
]
},
{
"by_value": "2017-06-12",
"total_people": 4760,
"cells": [
{
"people": 4539,
"percent": 95.36
},
{
"people": 558,
"percent": 11.72
},
{
"people": 359,
"percent": 7.54
}
]
},
{
"by_value": "2017-06-13",
"total_people": 4711,
"cells": [
{
"people": 4477,
"percent": 95.03
},
{
"people": 472,
"percent": 10.02
}
]
}
]
}
虽然这里已经实现了每次切换都重新渲染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
}]
});
});
