Echarts实战案例代码(4):地图散点气泡图飞线(迁徙线)API接口前端处理数据的解决方案

简介: Echarts实战案例代码(4):地图散点气泡图飞线(迁徙线)API接口前端处理数据的解决方案

在使用Echarts地图组件时,做飞线或散点气泡图,需要转换经纬度格式。(如需转载,请注明来源于漏刻有时数据可视化数据分析研究中心)



一、标准的JSON数据API接口,后端无论是php\python\java都可以,只要生成对应的JSON数据格式即可。

{
  "err": "",
  "res": "",
  "data": [
    {
      "lineId": "1",
      "fromName": "喀什",
      "toName": "北京",
      "fromLon": "76.051587",
      "fromLat": "39.499487",
      "toLon": "116.4551",
      "toLat": "40.2539",
      "lineInfo": "10辆已到,8辆途中",
      "avenueData":[{"name":"甘肃","value":[103.817527,36.071767,12]},{"name":"宁夏","value":[106.223638,38.491113,15]}]
    },
    {
      "lineId": "2",
      "fromName": "喀什",
      "toName": "上海",
      "fromLon": "76.051587",
      "fromLat": "39.499487",
      "toLon": "121.4648",
      "toLat": "31.2891",
      "lineInfo": "8辆已到,6辆途中",
      "avenueData":[]
    },
    {
      "lineId": "3",
      "fromName": "喀什",
      "toName": "杭州",
      "fromLon": "76.051587",
      "fromLat": "39.499487",
      "toLon": "120.206886",
      "toLat": "30.251335",
      "lineInfo": "6辆已到,4辆途中",
      "avenueData":[]
    },
    {
      "lineId": "4",
      "fromName": "喀什",
      "toName": "武汉",
      "fromLon": "76.051587",
      "fromLat": "39.499487",
      "toLon": "114.275941",
      "toLat": "30.59225",
      "lineInfo": "4辆已到,2辆途中",
      "avenueData":[]
    }
  ]
}

二、 $.ajax获取JSON数据,并在success: function (result) {}中进行飞线和气泡图格式的处理。

 for (var i = 0; i < result.data.length; i++) {
                    //起始点数据;
                    dataName.push([{name: result.data[i].fromName}, {
                        name: result.data[i].toName,
                        value: result.data[i].lineId
                    }]);
                    //气泡数据;
                    dataList1.push({
                        name: result.data[i].toName,
                        value: [result.data[i].toLon, result.data[i].toLat, result.data[i].lineId]
                    });
                    console.log(dataList1);
                    //飞线数据;
                    dataList2.push({
                        fromName: result.data[i].fromName,
                        toName: result.data[i].toName,
                        coords: [[result.data[i].fromLon, result.data[i].fromLat], [result.data[i].toLon, result.data[i].toLat]],
                        value: result.data[i].lineId
                    });
                    //气泡提示信息;
                    tipsInfo.push(result.data[i].lineInfo);
                    //途径地气泡;
                    avenueData.push(result.data[i].avenueData);
                    //var p11 = result.data[i].avenueData;
                }
                //多个数组对象合并;
                var dataScatter = [];
                avenueData.map(function (value, index, array) {
                    dataScatter = dataScatter.concat(value);
                });
                //console.log(dataScatter);
                //渲染图表;
                echart5Str(dataName, tipsInfo, dataList1, dataList2, dataScatter);
            },


三、Echarts地图组件函数 echart5Str(dataName, tipsInfo, dataList1, dataList2, dataScatter);


Done!

相关文章
|
1天前
|
JSON API 数据格式
阿里巴巴商品详情接口(阿里巴巴 API 系列)
在电商开发中,获取阿里巴巴商品详情信息对数据分析、竞品研究等至关重要。通过调用其商品详情接口,开发者可获取标题、价格、图片、描述等数据,满足多种业务需求。接口采用HTTPS协议,支持GET/POST请求,返回JSON格式数据。示例代码展示了如何使用Python的requests库进行接口请求,需传递商品ID和访问令牌。实际应用时,请依据官方文档调整参数并确保安全性。
27 10
|
2天前
|
JSON API 数据格式
eBay商品详情接口(ebay API系列)
eBay 商品详情接口是电商从业者、开发者和数据分析师获取商品详细信息的重要工具,涵盖标题、价格、库存、卖家信息等。使用前需在 eBay 开发者平台注册并获取 API 凭证,通过 HTTP GET 请求调用接口,返回 JSON 格式数据。Python 示例代码展示了如何发送请求并解析响应,确保合法合规使用数据。
32 12
|
4天前
|
监控 供应链 搜索推荐
亚马逊商品详情接口(亚马逊 API 系列)
亚马逊作为全球最大的电商平台之一,提供了丰富的商品资源。开发者和电商从业者可通过亚马逊商品详情接口获取商品的描述、价格、评论、排名等数据,对市场分析、竞品研究、价格监控及业务优化具有重要价值。接口基于MWS服务,支持HTTP/HTTPS协议,需注册并获得API权限。Python示例展示了如何使用mws库调用接口获取商品详情。应用场景包括价格监控、市场调研、智能选品、用户推荐和库存管理等,助力电商运营和决策。
51 23
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
5天前
|
JSON 数据挖掘 API
lazada商品详情接口 (lazada API系列)
Lazada 是东南亚知名电商平台,提供海量商品资源。通过其商品详情接口,开发者和商家可获取商品标题、价格、库存、描述、图片、用户评价等详细信息,助力市场竞争分析、商品优化及库存管理。接口采用 HTTP GET 请求,返回 JSON 格式的响应数据,支持 Python 等语言调用。应用场景包括竞品分析、价格趋势研究、用户评价分析及电商应用开发,为企业决策和用户体验提升提供有力支持。
52 21
|
6天前
|
数据采集 JSON 监控
速卖通商品列表接口(以 AliExpress Affiliate 商品查询 API 为例)
以下是使用 Python 调用速卖通商品列表接口(以 AliExpress Affiliate 商品查询 API 为例)的代码示例。该示例包含准备基础参数、生成签名、发送请求和处理响应等关键步骤,并附有详细注释说明。代码展示了如何通过公共参数和业务参数构建请求,使用 HMAC-SHA256 加密生成签名,确保请求的安全性。最后,解析 JSON 响应并输出商品信息。此接口适用于商品监控、数据采集与分析及商品推荐等场景。注意需通过 OAuth2.0 获取 `access_token`,并根据官方文档调整参数和频率限制。
|
6天前
|
JSON 监控 API
速卖通商品列表接口(速卖通API系列)
速卖通提供商品列表API,开发者可通过关键词、类目、价格范围等条件获取商品标题、价格、销量等基本信息。使用前需注册开发者账号、创建应用并授权获取access_token。Python示例代码展示了如何调用接口,返回JSON格式数据,包含商品列表、总数、页码等信息。应用场景包括商品监控、数据分析和个性化推荐。注意API会更新,请参考官方文档。
|
7天前
|
存储 搜索推荐 API
淘宝拍立淘按图搜索API接口系列概述
淘宝拍立淘按图搜索API接口允许用户通过上传图片或拍摄实物来搜索相似或相同的商品。这一功能主要依赖于图像识别技术,系统会对上传的图片进行分析和处理,提取出商品的特征信息,并在淘宝的商品数据库中进行匹配搜索,最终返回与上传图片相似或相同的商品列表。
|
7天前
|
API PHP 开发者
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。
|
7天前
|
缓存 Java 应用服务中间件
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
35 5

热门文章

最新文章