WAMP+百度Echarts實戰
作者：WenWu_Both
出處：http://blog.csdn.net/wenwu_both/article/
版權：本文版權歸作者和CSDN部落格共有
轉載：歡迎轉載，但未經作者同意，必須保留此段宣告；必須在文章中給出原文連結；否則必究法律責任
所謂“WAMP”指的是Windows、Apache、Mysql、PHP，相應的，Linux系統下的這一套就叫“LAMP”，以後看到這倆貨，知道是啥就可以了，本篇主要介紹下在WAMP下，百度Echarts資料的構造方法。
百度Echarts在構造option時，主要用到list和dict兩種資料結構，其典型資料如下：
{
"lengend1 很明顯，這是一個dict，其中包含了多個list，有的list中又包含了dict。一句話就是，Echarts的資料結構是list與dict相互巢狀一鍋粥（傳遞data的時候，只看最外層就可以）。
（1）list
在js端，list格式的資料可以採取以下方式解析：
var time = [], Area1 = [], Area2 = [], Area3 = [], Area4 = [], Area5 = [], Serdata = []
//呼叫ajax來實現非同步的載入資料
function getdata() {
$.ajax({
type: "post",
async: false,
url: "getdata2.php",
data: {},
dataType: "json",
success: function(result){
if(result){
for(var i = 0 ; i < result.data.length; i++){
time.push(result.data[i].time);
Area1.push(result.data[i].Area1);
Area2.push(result.data[i].Area2);
Area3.push(result.data[i].Area3);
Area4.push(result.data[i].Area4);
Area5.push(result.data[i].Area5);
};
for(var i = 0 ; i < result.data1.length; i++){
Serdata.push({"value":result.data1[i].value, "name":result.data1[i].name});
};
//alert(result.data.length)
}
},
error: function(errmsg) {
alert("Ajax獲取伺服器資料出錯了！"+ errmsg);
}
});
return time, Area1, Area2, Area3, Area4, Area5, Serdata;
}說白了，就是初始化陣列[]，然後通過push的方式進行裝填，單資料直接裝填，如Area1.push(result.data[i].Area1);，如果是dict，則通過構造進行追加，如Serdata.push({"value":result.data1[i].value, "name":result.data1[i].name});
（2）dict
在js端，dict格式的資料可以採取以下方式解析：
var geodata = new Array()
//呼叫ajax來實現非同步的載入資料
function getdata() {
$.ajax({
type: "post",
async: false,
url: "geodata.php",
data: {},
dataType: "json",
success: function(result){
if(result){
for(var i = 0 ; i < result.length; i++){
geodata[result[i].name] = [result[i].longitude, result[i].latitude] };
//alert(result.data.length)
}
},
error: function(errmsg) {
alert("Ajax獲取伺服器資料出錯了！"+ errmsg);
}
});
return geodata;
}與list不同的是，其初始化的是物件，而非陣列，var geodata = new Array()；資料追加模式不是push，而是直接賦值，其構造模式與普通dict沒有任何區別，如：geodata[result[i].name] = [result[i].longitude, result[i].latitude]
（3）php返回多個json
如果js端每需要1個data，後端就構建1個php檔案的話，不光後端會瘋，前端也得增加很多重複的解析json的程式碼，所以要求php能夠一次性返回多個json。
方法很簡單，只需要PHP在最後return資料的時候，將多個json封裝成1個大的json就可以了，然後前端根據各json的name選擇性呼叫就可以了。
如：return "{\"data\":", $data, ",\"data1\":", $data1, "}"
注意：拼裝的json不宜過多，否則會影響前端的重新整理速度。
ps: PHP嚴格要求每行以“；”結尾，需要注意一下；json資料中有中文的話，可能會發生亂碼，需要注意編碼統一；php返回的結果中，中文可能顯示為編碼符號，但打印出來就正常了，所以不必擔心。
拿上文中的樣例資料做了下測試，結果如下：
