echarts下拉列表切换数据(一)

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
}
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值