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月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
上下文选择器(迭代选择器):基于祖先或同胞元素选择一个元素 ID和类选择器:基于id#和class的属性值进行选择元素。 属性选择器:基于属性的有无和特征进行选择。 ①上下文选择器: 上下文选择器的语法格式:标签1 标签2{属性:值;} //注意:组合选择器和上下文选择器的区别,组合选择器以逗号隔开, 上下文选择器以空格隔开 ②特殊的上下文选择器 子选择器> : 语法格式:标签1>标签2 解释说明:标签1和标签2
149 0
|
2月前
|
算法 API 数据安全/隐私保护
电商 API 双平台实战:淘宝 item.get + 京东 item_detail 对接指南(附可复用代码 + 问题排查)
本文详细解析了淘宝和京东双平台API对接的核心流程,涵盖资质申请、凭证获取、签名生成、高频接口调用及常见问题解决方案,助力开发者高效实现商品数据同步与管理。
|
2月前
|
数据采集 缓存 API
1688 API 实战指南:搞定批发场景的 3 大核心难题(附签名代码与避坑清单)
本文深入解析了1688 API 在批发场景下的三大核心难题及解决方案,涵盖签名机制、商品数据处理与订单同步等高频问题,提供可复用代码与避坑清单,助你高效对接1688平台。
|
4月前
|
缓存 JSON API
VIN车辆识别码查询车五项 API 实践指南:让每一俩车有迹可循(Python代码示例)
VIN(车辆识别代码)是全球唯一的17位汽车标识码,可快速获取车架号、发动机号、品牌型号等核心信息。在二手车交易、保险理赔、维修保养等场景中,准确解析VIN有助于提升效率与风控能力。本文介绍VIN码结构、适用场景,并提供Python调用示例及优化建议,助力企业实现车辆信息自动化核验。
709 1
|
4月前
|
边缘计算 监控 Java
跨境电商 API 对接避坑指南:亚马逊 SP-API 超时问题的 5 种解决方案(附重试代码模板)
在对接亚马逊 SP-API 时,超时问题常导致订单延迟、库存失败,影响运营。本文总结某 3C 品牌实战经验,详解超时的 3 大根源与 5 大解决方案,涵盖动态超时、重试机制、请求拆分、并发控制与边缘加速,并附可复用 Python 代码,助你将超时率从 20% 降至 1% 以下。
|
4月前
|
安全 API 数据安全/隐私保护
低代码革命:API无代码集成如何让企业“3天上线一个生态”?
在数字化转型浪潮中,API成为释放数据价值、提升企业效率的核心。本文详解API架构设计、安全实践与跨平台集成,为CTO提供效率提升指南,涵盖微服务、安全认证、协议选择、低代码集成及未来趋势,助力企业构建敏捷、安全、高效的数字生态。
|
4月前
|
自然语言处理 供应链 前端开发
深度解析与技术实践:高效调用淘宝商品评论API的策略与代码实现
本文深入解析淘宝开放平台商品评论接口(Taobao.item_review),涵盖接口功能、调用逻辑与实战代码,助力开发者高效获取用户评价数据,提升电商数据分析能力。
|
2月前
|
存储 监控 前端开发
淘宝商品详情 API 实战:5 大策略提升店铺转化率(附签名优化代码 + 避坑指南)
本文深入解析淘宝商品详情API的核心字段与实战应用,分享如何通过动态定价、库存预警、差评控制等5大策略提升电商转化率。结合300+店铺实战经验,提供优化代码与避坑指南,助力开发者与运营者实现数据驱动的精细化运营。
|
5月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
671 80
|
7月前
|
JSON 安全 Java
什么是用于REST API的JWT Bearer令牌以及如何通过代码和工具进行调试
在Web开发中,保护REST API至关重要,而JSON Web令牌(JWT)特别是JWT Bearer令牌,是一种高效方法。它通过紧凑、自包含的结构实现安全信息交换,提升用户体验。本文探讨JWT Bearer的基本概念、结构与实现,包括在Java中的应用步骤,以及使用Apipost和cURL进行测试的方法。JWT优势明显:无状态、互操作性强,适用于分布式系统。掌握JWT Bearer,可助开发者构建更安全、高效的API解决方案。