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,然后进行编写的,前端引入部分就不显示了,主要是渲染部分:
<script type="text/javascript"> var myChart1=echarts.init(document.getElementById('show1')); var option= { title: { text: '折线图' }, tooltip: {}, legend: { data:['数值量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: { type:'value'}, series: [{ name: '数值量', type: 'bar', data: [] }] }; myChart1.setOption(option); //利用数组,自己将东西直接接收 var nums=[]; //利用ajax动态获取数据,地址为java提供的接口 $.ajax({ type : "post", async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url : "/api/chart", //请求发送到TestServlet处 data : {}, dataType : "json", //返回数据形式为json success : function(result) { console.log(result); //请求成功时执行该函数内容,result即为服务器返回的json对象 if (result) { for(var i=0;i<result.length;i++){ nums.push(result[i]); //挨个取出销量并填入销量数组 } } myChart1.setOption( { series: [{ // 根据名字对应到相应的系列 name: '数值量', data: nums, type: 'bar' }] } ) }, error : function(errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart1.hideLoading(); } }); </script>
例子就是echat里提供的柱形图,需要注意的是ajax里填的url,可以看到这里只写了/api/chart,前面不是说了本地tomcat提供的url前面不是还得有localhost:8080,也就是ip与端口号嘛,这个就要看我之前的博客,nginx反向代理解决前端跨域问题的博客了。
3总结
实现ajax异步请求,主要就是把几个参数的作用搞明白,然后把逻辑搞对。我写的时候第一次一直加载不出数据,然后把async改为false,也就是使用同步才成功。事后debug才想起来,我把要渲染的4个图都起名为myChart,异步执行后,第一个图肯定已经过了,数据与其他图又对不上,所以才一直空白。所以还是多尝试,多写,多思考。