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/index.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
                }]
            });
        }
    });
}

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
                }
            ]
        }
    ],
    "report_update_time": "2017-06-14 21:27:04.161",
    "data_update_time": "2017-06-14 21:26:19.000",
    "data_sufficient_update_time": "2017-06-14 21:26:19.000",
    "truncated": false
}