AngularJS+Echarts利用Ajax实现数据动态刷新

这个是最终版,删掉了之前写的,结合AngularJS ,利用Ajax动态获取json数据,并动态刷新数据生成柱状图和饼图,当你修改json文件时,一旦保存即可立即加载出来,不用刷新整个页面,这也是ajax异步加载的好处。话不多说,直接上代码

html:














光圣科技尾牙晚会获奖统计

















json数据:

[
{"name":"财务科","value":"0.5"},
{"name":"技术科","value":"0.3"},
{"name":"生产科","value":"0.6"},
{"name":"销售科","value":"0.7"},
{"name":"人事科","value":"0.3"},
{"name":"材料科","value":"0.5"},
{"name":"研发科","value":"0.4"},
{"name":"啊啊科","value":"0.9"},
{"name":"一一科","value":"0.2"},
{"name":"嘻嘻科","value":"0.5"},
{"name":"哈哈科","value":"0.7"},
{"name":"笨蛋科","value":"0.5"},
{"name":"一库科","value":"0.8"},
{"name":"吼吼科","value":"0.6"}
]

效果图:AngularJS+Echarts利用Ajax实现数据动态刷新_第1张图片

你可能感兴趣的:(前端开发,html)