今天自己在做小東西的時候，需要一個功能，需要接收資料庫的記錄並顯示在柱狀圖上，以前寫過一次但是沒總結，下面我總結一下實現過程。

一、準備js

二、實現

SpringMVC後臺獲取資料

1.Controller控制層呼叫service業務層

    /**
     * @ResponseBody：返回JSON格式內容
     * @RequestMapping("/findNgMonth/{ngMonth}"):對映路徑，即ajax請求的url地址
     * */
    @ResponseBody
    @RequestMapping(value = "/findNgMonth/{ngMonth}"
 
,produces = "text/html;charset=UTF-8",method = RequestMethod.GET)
    public String findNgMonth(@PathVariable("ngMonth")String ngMonth)throws Exception{
        List<NgBills> ngBillsList=null;
        try{
            System.out.println("獲取日期："+ngMonth);
            //呼叫service業務層的findNgMonth()方法
 

            ngBillsList=billsService.findNgMonth(ngMonth);
            //返回結果
            return JSON.toJSONString(ngBillsList);
        }catch (ExceptionCountents ec){
            ec.printStackTrace();
            return "查詢失敗！";
        }
    }

2.service業務層呼叫Dao層

@Transactional
@SuppressWarnings("unchecked"
 
)
public List<NgBills> findNgMonth(String ngMonth)throws Exception{
    //呼叫Dao層中的findNgMonth方法，並返回一個List集合
    return billsDAO.findNgMonth(ngMonth);
}

3.Dao層查詢資料庫

    @SuppressWarnings("unchecked")
    public List<NgBills> findNgMonth(String ngMonth)throws ExceptionCountents {
        //編寫hibernate語句，模糊查詢，並把返回結果按時間升序排列
        String hql="FROM NgBills ng where ng.ngTime like'%"+ngMonth+"%' order by ng.ngTime asc ";
        //執行查詢
        Query query = entityManager.createQuery(hql);
        //返回List集合
        return query.getResultList();
    }

到此資料已經得到了。

製圖

準備一個div，規定高寬，用於放置柱狀圖

<div id="TImgNgBills" class="panel-body panel-collapse collapse in" style="width: 1100px;height: 500px;">
</div>

1.button點選觸發

$("#ngMonthBtn").click(function () {
    //觸發事件，呼叫getMonthData函式
    getMonthData();
});

2.ajax獲取後臺資料

function getMonthData() {
    $.ajax({
        url: 'findNgMonth/'+'2017-07',
        type: 'GET',
        contentType: "application/json;charset-utf-8",
        dataType: 'json',
        data: {},
        success: function (result) {
            if(result.length==0){
                alert("本月暫無記錄！");
            }else{
                var xValue=[];
                var yValue=[];
                for (var i = 0; i < result.length; i++) {
                    //取出x軸--時間
                    xValue.push(result[i].ngTime);
                }
                for (var i = 0; i < result.length; i++) {
                    //取出y軸--資料
                    yValue.push(result[i].ngNTotalMoney);
                }
                //呼叫製表函式，並把獲取到的值傳遞過去
                getChart(xValue,yValue);
            }
        }
    });
}

3.使用ECharts製圖

function getChart(xValue,yValue){
    //div初始化
    var myChart=echarts.init(document.getElementById('TImgNgBills'));
    var option = {
        title: {
            text: '當月記錄柱狀圖'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        //x橫軸
        xAxis: [
            {
                type: 'category',
                //data值為ajax傳遞過來的值
                data :xValue,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: {},
        series: [
            {
                name: '當月未收(元)',
                type: 'bar',
                barWidth: '40%',
                data: yValue,
                //滑鼠放在柱狀圖上面時，顯示數值
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position:'top'
                        }
                    }
                }
            }
        ]
    };
    //清除上一次資料快取
    myChart.clear();
    //開始製圖
    myChart.setOption(option);
}

到此整個流程就走完了，下面可以看一下效果圖

三、問題

1.在製作圖表的時候，不會清空上一次資料值，而是直接在上次圖後面繼續增加資料，網上百度很多都是在 myChart.setOption(option);呼叫之前使用 myChart.clear();清除快取，這個也就是常見的解決方法。而有些時候，例如我這一次，使用這個方法沒有效果，也就意味著問題根源不是出在製圖這裡。經過alert仔細排查，最後發現，出現問題是下面這裡：

var xValue=[];
var yValue=[];
xValue.push();
yValue.push();

官方解釋：push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。意味著我們在賦值的時候，並沒有清空上一次的值，而是直接在後面新增。

解決：在每個需要賦值的地方，重新var一次。

這個問題比較偏，不是常見問題，我先記錄在這裡，後面有另外解決方法也可繼續新增進來。