echarts展示后台数据

最新推荐文章于 2023-05-11 14:44:11 发布

皮埃no

最新推荐文章于 2023-05-11 14:44:11 发布

阅读量610

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44861621/article/details/107888341

版权

本文介绍如何在JSP页面中使用Echarts通过Ajax获取后台数据。关键步骤包括在JSP头部引入必要的标签和Echarts.min.js库，控制器代码处理/product请求跳转到页面，并执行/show请求获取JSON数据。为了确保前端能接收到JSON数据，需要引入相关jar包。最后，文章展示了实际的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp部分代码

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <a href="/product">环形图</a>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px;width: 1100px;margin-left: 30px;margin: 20px auto;"></div>
    <script type="text/javascript">
         // 利用AjAx来获取后台传入的数据（@Responsebody注解传入的）
         var productName=[];
         var sales=[];
         $.ajax({
             type: "get",
             async: false, //是否异步
             url: "${pageContext.request.contextPath}/show",
             contentType: "application/json;charset=UTF-8",
             dataType: "json", //跨域json请求一定是json
             success: function (response) {
                 // console.log('response :>> ', response);
                 for (var index = 0; index < response.length; index += 1) {
                     productName.push(response[index].productname)
                     sales.push(response[index].sale)
                 }

             },
             error: function (response) {
                 console.log("请求失败")
             }
         });
        //Echarts展示数据
        $(function () {
            {
                // 基于准备好的dom，初始化echarts图表
                var myChart = echarts.init(document.getElementById('main'));

                option = {
                    xAxis: {
                        type: 'category',
                        data: productName,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: sales,
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        },

                    }]
                };

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        })
    </script>
</body>
</html>

注意：头部的两个标签不要忘了，同时也要引入echarts.min.js文件。
这里用的是Ajax来获取的后台传入的json数据
controller的代码

@RequestMapping("product")
    public ModelAndView product(){
        ModelAndView mv=new ModelAndView();
        mv.setViewName("donut_chart");
        return mv;
    }
    @RequestMapping("/show")
    public @ResponseBody
    List<Product> show(){
        List<Product> list=new ArrayList<>();
        Product p1=new Product();
        p1.setProductname("衬衫");
        p1.setSale(15);

        Product p2=new Product();
        p2.setProductname("毛衣");
        p2.setSale(20);

        Product p3=new Product();
        p3.setProductname("牛仔裤");
        p3.setSale(13);
        list.add(p1);
        list.add(p2);
        list.add(p3);
        System.out.println(list);
        return list;
    }

接受/product的请求是跳转到上面的jsp页面，然后在script代码中执行/show请求来获取后台传来的数据。
当然最最重要的还要让前端能够接受到的是json类型的数据，所以要导入以下jar包

<!--导入将对象转换为JSon数据的包-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.0</version>
    </dependency>