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!