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!