漏刻有时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