利用ECharts在线生成图表

我们可以使用ECharts获取后台数据，通过Ajax，JavaScript在线生成图表。

我们制作测试用例，就不使用自动加载，采用手动方式进行生成，让流程直观。

<a href="#" target="rightFrame" οnclick="showSale()">查看销售额</a>

<script type="text/javascript">
    function showSale() {
        $("#main").css("display", "block");
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '门店年销售额'    //显示在图表左上角  可以认为是图表的名字
            },
            tooltip: {},  //Echarts提示框（tooltip）浮层位置，不设置时，默认位置会跟随鼠标的位置。
            legend: {
                data: ["销售额"]       //用于设置图表样式 例如上下间距/颜色 type:plain\scroll 分为普通样式/滚动翻页
            },
            xAxis: {//X坐标显示什么  //通过后台获取
                data: []     
            },
            yAxis: {},//Y坐标显示什么  不设置 会根据返回数据进行自动设置
            series: [{//中间显示的数据
                name: '销量',            
                type: 'bar', //echarts 里系列类型就是图表类型，比如line（折线图），bar（柱状图），pie（饼图）等，详细可以参考echarts官网手册。
                data: []      //通过后台返回
            }]
        };
        //设置加载动画
        myChart.showLoading();
        //定义数组来接受后台返回数据
        var names = [];//用于接受名称
        var sales = [];//用接受销量
        //利用ajax请求发起数据请求
        $.ajax({
                url: "showsale",
                type: "post",
                data: {},
                dataType: "json",
                success: function (result) {
                    console.log(result)
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name)//往最后一个元素追加
                    }
                    for (var i = 0; i < result.length; i++) {
                        sales.push(result[i].sale)//往最后一个元素追加
                    }
                    //隐藏加载动画
                    myChart.hideLoading();
                    //将数据覆盖进入列表
                    myChart.setOption({
                        xAxis: {
                            data: names
                        },
                        series: [{
                            data: sales
                        }]
                    })
                }
            }
        );

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
//设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
    }
</script>

后台代码：

@WebServlet("/showsale")
public class ShowSaleServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ShowSale 接受请求");
        response.setContentType("text/text");
        response.setCharacterEncoding("UTF-8");
        DoorDao doorDao=new DoorDao();
        try {
            List<Door>  list=doorDao.showSale();
            System.out.println(list);
            Gson gson=new Gson();
            String json=gson.toJson(list);
            System.out.println(json);
            //通过输出流返回给浏览器
            response.getWriter().write(json);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

结果图：