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，非同步執行後，第一個圖肯定已經過了，資料與其他圖又對不上，所以才一直空白。所以還是多嘗試，多寫，多思考。