WAMP+百度Echarts实战
来源:互联网 发布:c盘中的windows文件夹 编辑:程序博客网 时间:2024/05/18 03:24
作者:WenWu_Both
出处:http://blog.csdn.net/wenwu_both/article/
版权:本文版权归作者和CSDN博客共有
转载:欢迎转载,但未经作者同意,必须保留此段声明;必须在文章中给出原文链接;否则必究法律责任
所谓“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返回的结果中,中文可能显示为编码符号,但打印出来就正常了,所以不必担心。
拿上文中的样例数据做了下测试,结果如下:
- WAMP+百度Echarts实战
- 百度--ECharts
- 百度echarts柱状图
- Echarts百度实例
- 百度echarts的使用
- 了解百度Echarts工具
- 百度echarts 的使用
- 百度ECharts 图表介绍
- 百度echarts.js画图
- 百度echarts中地图
- 百度ECharts使用示例
- 百度 echarts 使用总结
- 百度echarts的使用
- echarts 百度图表
- 百度ECharts的使用
- ECharts和百度地图
- Echarts条形图实战
- 【ECharts】百度图表插件ECharts使用
- Kubernetes总架构图
- PCL中显示ply数据
- 比特币(BitCoin)学习第三天-什么是比特币(BitCoin)钱包(补充)?
- ubuntu下 tftp服务器的搭建
- easyui combobox 动态搜索框
- WAMP+百度Echarts实战
- autojump使用举例
- 取掉谷歌自带的默认记住密码的黄色背景
- 队列的两种存储方式的介绍与实现
- 算法复习:旋转数组的最小数字
- 顾问(Advisor),通知 advice ,注解Aspectj
- Codeforces Round #192 (Div. 2)
- 顾问 两种自动代理 AspectJ 注解实现 七个例子
- STL——函数对象