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

相关文章
|
9天前
|
存储 数据挖掘 BI
API数据源:轻松接入各类业务系统数据
在数字化转型中,企业面临多样化的数据需求。Quick BI推出API数据源功能,支持广泛的数据接入,包括实时天气、电商交易及内部业务数据,极大丰富了可分析数据范围。该功能提供灵活的连接方式(抽取和直连模式)、多元授权机制(基础认证、前置请求)和自动化数据解析,降低了操作门槛,提升了配置效率。通过动态Token获取等最佳实践,确保数据安全与实时性,满足企业具体业务需求。了解更多,请访问Quick BI官方文档或瓴羊官网。
139 77
|
12天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
5天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
24 12
|
10天前
|
供应链 API 开发者
解锁电商数据的无限可能:探秘京东商品SKU信息API接口
京东商品SKU信息API接口是电商开发与运营中的重要工具,帮助开发者获取商品的详细属性,如库存、价格、规格等。通过该接口,电商平台可以丰富商品展示页面,提升用户体验;商家能实时掌握库存动态,优化销售策略;数据分析人员可深入洞察市场趋势,实现精准营销。使用前需注册京东开放平台账号、创建应用并获取API权限,同时仔细阅读API文档以确保正确调用。代码示例展示了如何用Python调用该接口,并处理返回数据。未来,该接口将在个性化推荐、智能库存管理和数据分析等领域发挥更大作用,助力电商业务创新与发展。
56 14
|
1天前
|
缓存 监控 API
如何查看商品销量 API 接口的性能指标数据
在电商蓬勃发展的时代,数据驱动业务决策至关重要。商品销量作为核心指标,依赖高效稳定的API接口获取。本文探讨如何查看和优化商品销量API的性能指标,包括响应时间、吞吐量、错误率和并发用户数,通过专业工具、日志分析及自定义代码实现监控与优化,确保业务稳定运行和用户体验提升。
15 2
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
95 0
|
8月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
195 0
|
8月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
8月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
70 0
|
8月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
87 0