echart实战：利用ajax动态渲染数据

1.echart介绍与前后端分离

echart是国内百度在维护的一个数据可视化框架，js编写，方便生成各种图表。我的毕设就是关于数据可视化的，所以打算采用echart做前端展示。由于数据肯定是从后端获取，为了前后端分离，我决定由后端提供api，前端利用ajax异步获取数据并加载。关于echart里使用异步加载官方文档说的比较浅，而且例子不是真的异步，只是延迟加载模拟异步请求数据，有的时候对新手不是很友好。其次，异步请求在调试时受限较大，很容易出现数据格式不对，或者请求跨域等问题，要注意。

2.具体步骤及部分代码展示

   2.1后端根据要求提供api

      我这里就不多说后端的问题了，但是提供的api的数据格式要对。   

      我的例子是在本地跑的java代码，部署在tomcat里，url为localhost:8080/api/chart

    2.2前端ajax请求编写及渲染数据

      ajax这里是直接引入了jq，然后进行编写的，前端引入部分就不显示了，主要是渲染部分：

例子就是echat里提供的柱形图，需要注意的是ajax里填的url，可以看到这里只写了/api/chart，前面不是说了本地tomcat提供的url前面不是还得有localhost：8080，也就是ip与端口号嘛，这个就要看我之前的博客，nginx反向代理解决前端跨域问题的博客了。

3总结

实现ajax异步请求，主要就是把几个参数的作用搞明白，然后把逻辑搞对。我写的时候第一次一直加载不出数据，然后把async改为false，也就是使用同步才成功。事后debug才想起来，我把要渲染的4个图都起名为myChart，异步执行后，第一个图肯定已经过了，数据与其他图又对不上，所以才一直空白。所以还是多尝试，多写，多思考。