ECharts+Ajax动态制图

今天自己在做小东西的时候，需要一个功能，需要接收数据库的记录并显示在柱状图上，以前写过一次但是没总结，下面我总结一下实现过程。

一、准备js

下载ECharts的js文档，导入在项目中。这里也准备了链接http://echarts.baidu.com/download.html

二、实现

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一次。

这个问题比较偏，不是常见问题，我先记录在这里，后面有另外解决方法也可继续添加进来。