WAMP+百度Echarts实战

作者：WenWu_Both
出处：http://blog.youkuaiyun.com/wenwu_both/article/
版权：本文版权归作者和优快云博客共有
转载：欢迎转载，但未经作者同意，必须保留此段声明；必须在文章中给出原文链接；否则必究法律责任

所谓“WAMP”指的是Windows、Apache、Mysql、PHP，相应的，Linux系统下的这一套就叫“LAMP”，以后看到这俩货，知道是啥就可以了，本篇主要介绍下在WAMP下，百度Echarts数据的构造方法。

百度Echarts在构造option时，主要用到list和dict两种数据结构，其典型数据如下：

{
"lengend1":["交通小区1","交通小区2","交通小区3","交通小区4","交通小区5"],
"区域出行发生量":[
                {"value":45053, "name":"交通小区1"},
                {"value":51247, "name":"交通小区2"},
                {"value":72968, "name":"交通小区3"},
                {"value":25024, "name":"交通小区4"},
                {"value":114775, "name":"交通小区5"}
            ],
"lengend2":["交通小区1","交通小区2","交通小区3","交通小区4","交通小区5"],
"xAxis2":["1时", "2时",   "3时",   "4时",   "5时",   "6时",   "7时",   "8时",   "9时",   "10时",  "11时",  "12时",  "13时",  "14时",  "15时",  "16时",  "17时",  "18时",  "19时",  "20时",  "21时",  "22时",  "23时",  "24时"],
"交通小区1":[1439,  969,    656,    411,    278,    242,    319,    778,    1843,   2252,   2828,   2981,   2901,   3222,   3296,   2879,   2842,   2798,   2442,   1922,   2094,   2057,   1968,   1636],
"交通小区2":[1696,  1159,   801,    479,    266,    257,    432,    1013,   1871,   2698,   3337,   3473,   3212,   3376,   3340,   3258,   3147,   3206,   2991,   2241,   2555,   2468,   2136,   1835],
"交通小区3":[3024,  2431,   1660,   1085,   658,    532,    587,    1279,   3078,   3534,   4036,   4220,   4651,   4908,   4539,   3761,   4136,   4167,   3684,   3260,   3769,   3870,   2990,   3109],
"交通小区4":[972,   813,    567,    331,    229,    139,    184,    342,    565,    697,    814,    779,    995,    1315,   1284,   2316,   1736,   1293,   1295,   1207,   1443,   1962,   2538,   1208],
"交通小区5":[3876,  2984,   2211,   1258,   760,    666,    908,    2181,   4722,   5210,   5773,   6887,   7602,   7760,   8647,   7494,   6814,   7216,   6487,   5343,   5350,   5405,   5027,   4194]
}

很明显，这是一个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返回的结果中，中文可能显示为编码符号，但打印出来就正常了，所以不必担心。

拿上文中的样例数据做了下测试，结果如下：