見解決方案《Echarts地圖座標geoCoordMap後臺生成動態獲取的解決方案》
這樣的做法,肯定不是一個追求完美程序猿的做法,爲此糾結半月以後推出了比較滿意的解決方案。
實現原理:
var data = [
{name: '漏刻有時數據可視化', value: 200}
];
var geoCoordMap = {
'漏刻有時數據可視化': [121.554586, 29.813444]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
這是目前官方標準的寫法,是爲了獲取經緯度和地方的方便。但是在echarts中用的數據格式爲:
一個合併的數組格式,爲此解決方案應運而出,直接按照使用格式進行PUSH數組即可。
{name:"漏刻有時數據可視化",value:["121.55823312036928", "29.81378084601389", "200"]}
解決方案:
一、準備JSON接口API數據:
{
"err": "",
"res": "",
"data": [
{
"areaId": "1",
"areaName": "寧波商會·國貿中心",
"areaLon": "121.554586",
"areaLat": "29.813444",
"areaValue": "200"
},
{
"areaId": "2",
"areaName": "中基大廈",
"areaLon": "121.55823312036928",
"areaLat": "29.81378084601389",
"areaValue": "200"
}
]
}
二、ajax獲取數據並轉爲需要的格式?:
var b = [];
$.ajax({
type: 'get',
async: false,
url: 'js/data.json',
dataType: "json",
success: function (res) {
var a = res.data;
for (var i = 0; i < a.length; i++) {
b.push({
name: a[i].areaName,
value: [a[i].areaLon, a[i].areaLat, a[i].areaValue]
})
}
},
error: function (err) {
console.log(err + "圖表請求數據失敗!");
}
});
console.log(b);
Done!