在使用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!