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

简介: 漏刻有时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!

相关文章
|
22天前
|
JSON API 数据格式
淘宝拍立淘按图搜索API系列,json数据返回
淘宝拍立淘按图搜索API系列通过图像识别技术实现商品搜索功能,调用后返回的JSON数据包含商品标题、图片链接、价格、销量、相似度评分等核心字段,支持分页和详细商品信息展示。以下是该API接口返回的JSON数据示例及详细解析:
|
25天前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
1月前
|
JSON API 数据安全/隐私保护
Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
通过以上流程,可实现淘宝拍立淘按图搜索的完整调用链路,并获取结构化的JSON商品数据,支撑电商比价、智能推荐等业务场景。
|
1月前
|
JSON 中间件 Java
【GoGin】(3)Gin的数据渲染和中间件的使用:数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
我们在正常注册中间件时,会打断原有的运行流程,但是你可以在中间件函数内部添加Next()方法,这样可以让原有的运行流程继续执行,当原有的运行流程结束后再回来执行中间件内部的内容。​ c.Writer.WriteHeaderNow()还会写入文本流中。可以看到使用next后,正常执行流程中并没有获得到中间件设置的值。接口还提供了一个可以修改ContentType的方法。判断了传入的状态码是否符合正确的状态码,并返回。在内部封装时,只是标注了不同的render类型。再看一下其他返回的类型;
133 3
|
1月前
|
JSON Java Go
【GoGin】(2)数据解析和绑定:结构体分析,包括JSON解析、form解析、URL解析,区分绑定的Bind方法
bind或bindXXX函数(后文中我们统一都叫bind函数)的作用就是将,以方便后续业务逻辑的处理。
236 3
|
2月前
|
JSON 自然语言处理 监控
淘宝关键词搜索与商品详情API接口(JSON数据返回)
通过商品ID(num_iid)获取商品全量信息,包括SKU规格、库存、促销活动、卖家信息、详情页HTML等。
|
3月前
|
JSON API 数据安全/隐私保护
深度分析淘宝卖家订单详情API接口,用json返回数据
淘宝卖家订单详情API(taobao.trade.fullinfo.get)是淘宝开放平台提供的重要接口,用于获取单个订单的完整信息,包括订单状态、买家信息、商品明细、支付与物流信息等,支撑订单管理、ERP对接及售后处理。需通过appkey、appsecret和session认证,并遵守调用频率与数据权限限制。本文详解其使用方法并附Python调用示例。
|
2月前
|
机器学习/深度学习 JSON 监控
淘宝拍立淘按图搜索与商品详情API的JSON数据返回详解
通过调用taobao.item.get接口,获取商品标题、价格、销量、SKU、图片、属性、促销信息等全量数据。
|
2月前
|
JSON 缓存 自然语言处理
多语言实时数据微店商品详情API:技术实现与JSON数据解析指南
通过以上技术实现与解析指南,开发者可高效构建支持多语言的实时商品详情系统,满足全球化电商场景需求。
|
2月前
|
JSON API 数据格式
干货满满!淘宝商品详情数据,淘宝API(json数据返回)
淘宝商品详情 API 接口(如 taobao.item.get)的 JSON 数据返回示例如下