漏刻有时API接口实战开发系列(8)：ajax获取本地json实现echarts不同数据图表渲染的解决方案

项目需求

1. 筛选时间条件，实现echarts图表的联动渲染；
2. 开发前端代码，实现ajax传参即可；

项目分析

如果时间筛选和后端相配合，传递时间参数给后台，后台SQL根据筛选条件输入对应的json数据，前端异步获取，自动渲染。这是正常的项目步骤。
现在仅开发前端，实际上没有传递时间参数，为此，只能根据条件更换url，从而实现联动的效果。

项目代码

封装函数

/*条件筛选函数
 1. type,条件类型，0年，1月，2季度，3时间范围
 2. fromTime，起始时间;
 3. toTime,结束时间；
 *getRoseData(type, fromTime, toTime)；
  */

函数代码

function getRoseData(type, fromTime, toTime) {
    //判断操作事件来源;
    var url = "", data = "";//json地址
    if (type == "0") {//年数据;
        url = './json/years.json';
    } else if (type == "1") {//月读取数据;
        url = './json/months.json';
    } else if (type == "2") {//季度读取数据;
        url = './json/quarters.json';
    } else if (type == "3") {//筛选时间读取数据;
        url = './json/timedata.json';
        data = {
            fromTime: fromTime,
            toTime: toTime
        }
    } else {//默认读取数据;
        url = './json/normal.json';
    }

    //异步获取数据;
    $.ajax({
        type: 'get',
        async: true,
        url: url,
        data: data,
        dataType: "json",
        success: function (res) {
            //console.log(res.data);
            var dataName = [];
            if (res.data) {
                for (var i = 0; i < res.data.length; i++) {
                    dataName.push({name: res.data[i].name, value: res.data[i].value});
                }
            }
            //渲染图表;
            getRose(dataName, ".pie .chart");
        },
        error: function (err) {
            console.log(err + "请求数据失败!");
        }
    });
}

代码分析：

1. 将url依据不同的传递参数更换；
2. 将data:{}参数也根据不同操作预置；

Done！