5:基于Echarts的数据展现#私藏项目实操分享#

2021年11月24日 阅读数:3
这篇文章主要向大家介绍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<Goods> goodsList = null;
        try {
            goodsList = goodsService.listAllGoods();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        final ArrayList<Integer> ids = new ArrayList<>();
        List<String> nameList = new ArrayList<>();
        List<Double> price1List = new ArrayList<>();
        List<Double> price2List = new ArrayList<>();
        List<Integer> 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 文件javascript

  • bar.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>商品信息</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 90%;height:700px;"></div>
<script type="text/javascript">
    $.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");
</script>
</body>
</html>
  • pie.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <title>商品详细信息</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    id = getQueryVariable("id");
    console.log(id);
    $.get("goods?op=getById", {'id':id}, function (data) {
        console.log(data)
        // 基于准备好的dom,初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: data.goods.name+'商品详细信息'
            },
            series: [
                {
                    type: 'pie',
                    data: [
                        {
                            value: data.goods.price1,
                            name: '市场价格'
                        },
                        {
                            value: data.goods.price2,
                            name: '会员价格'
                        },
                        {
                            value: data.goods.amount,
                            name: '库存数量'
                        }
                    ]
                }
            ]
        };

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

</script>
</body>
</html>

页面效果

在这里插入图片描述
单击任意一个柱子,都会打开对应的饼状图,好比:
在这里插入图片描述html