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，然后进行编写的，前端引入部分就不显示了，主要是渲染部分：

<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，异步执行后，第一个图肯定已经过了，数据与其他图又对不上，所以才一直空白。所以还是多尝试，多写，多思考。