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!

相关文章
|
2天前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
3天前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
15 1
|
9天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
22 6
|
5天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
11天前
|
缓存 负载均衡 前端开发
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
13 1
|
11天前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
15 1
|
1天前
|
前端开发
纯前端模拟后端接口异步获取数据
纯前端模拟后端接口异步获取数据
8 0
|
2天前
|
前端开发 API
支付系统27-------梳理一下支付按钮,前端的代码
支付系统27-------梳理一下支付按钮,前端的代码
|
3天前
|
JavaScript 前端开发 API
JS案例:前端Iframe及Worker通信解决思路
JS案例:前端Iframe及Worker通信解决思路
|
3天前
|
前端开发 PHP 数据格式
【附带效果视频】php接口给前端返回流式数据,php使用event-stream进行数据推送,循环一次输出一次
【附带效果视频】php接口给前端返回流式数据,php使用event-stream进行数据推送,循环一次输出一次
7 0

热门文章

最新文章