5：基于Echarts的数据展示

Servlet层

@WebServlet(urlPatterns = "/goods")
public class GoodsServlet extends HttpServlet {
    private static final long serialVersionUID = 4116681024313896922L;

    private GoodsService goodsService = new GoodsServiceImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException {
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        final String op = request.getParameter("op");
        switch (op) {
            case "findAll":
                try {
                    findAll(request, response);
                } catch (IOException e) {
                    e.printStackTrace();
                }
                break;
            case "getById":
                try {
                    getById(request, response);
                } catch (SQLException|IOException e) {
                    e.printStackTrace();
                }
                break;
            default:
                break;
        }

    }

    private void getById(HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException {
        final String idStr = request.getParameter("id");
        if(idStr==null){
            throw new RuntimeException("待查询的商品的id不能为空");
        }
        Integer id = Integer.parseInt(idStr);
        final Goods goods = goodsService.getGoodsById(id);

        final JSONObject jsonObject = new JSONObject();
        jsonObject.put("goods", goods);
        response.getWriter().write(jsonObject.toString());
    }

    private void findAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
        List goodsList = null;
        try {
            goodsList = goodsService.listAllGoods();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        final ArrayList ids = new ArrayList();
        List nameList = new ArrayList();
        List price1List = new ArrayList();
        List price2List = new ArrayList();
        List amountList = new ArrayList();
        for (Goods goods : goodsList) {
            final Integer id = goods.getId();
            ids.add(id);
            final String name = goods.getName();
            nameList.add(name);
            final double price1 = goods.getPrice1();
            price1List.add(price1);
            final double price2 = goods.getPrice2();
            price2List.add(price2);
            final Integer amount = goods.getAmount();
            amountList.add(amount);
        }

        final JSONObject jsonObject = new JSONObject();
        jsonObject.put("ids", ids);
        jsonObject.put("nameList", nameList);
        jsonObject.put("price1List", price1List);
        jsonObject.put("price2List", price2List);
        jsonObject.put("amountList", amountList);

        response.getWriter().write(jsonObject.toString());
    }


}

前端代码

• 下载并导入jquery.min.js文件

• 下载并导入 echarts.min.js 文件

• bar.jsp页面

DOCTYPE html>


    
    商品信息
    
    





    $.get("goods?op=findAll", null, function (data) {
        let ids2 = data.ids;
        let xx = data.nameList;
        let price1 = data.price1List;
        let price2 = data.price2List;
        let amount = data.amountList;

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
            tooltip: {},
            legend: {
                data: ['商品信息']
            },
            xAxis: {
                data: xx
            },
            yAxis: {},
            series: [
                {
                    ids: ids2,
                    name: '市场价格',
                    type: 'bar',
                    data: price1
                },{
                    ids: ids2,
                    name: '会员价格',
                    type: 'bar',
                    data: price2
                },{
                    ids: ids2,
                    name: '库存数量',
                    type: 'bar',
                    data: amount
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        myChart.on('click', function (params) {
            console.log(option.series[params.seriesIndex].ids[params.dataIndex]);//获取自定义的值
            window.open("pie.jsp?id="+option.series[params.seriesIndex].ids[params.dataIndex],"_self");
        });
    }, "json");

• pie.jsp页面

    
    商品详细信息
    
    





    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (var i=0;i