spring-boot 加 thymeleaf 加 echats

最新推荐文章于 2024-12-26 15:51:12 发布

原创最新推荐文章于 2024-12-26 15:51:12 发布 · 469 阅读

2 ·

CC 4.0 BY-SA版权

spring boot 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中整合MyBatis、Thymeleaf和ECharts，实现数据展示和图表绘制。通过引入相关依赖、编写后端接口并设置前端页面，演示了数据从数据库读取到前端展示的全过程。

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

简介

Java maven项目，spring boot + mybatis + thymeleaf + Echarts。

实现目标

可以访问html。
数据可以带入html。
数据可以在Echarts中使用。

实现步骤

1.引入依赖


    <properties>
        <spring-boot-version>2.1.1.RELEASE</spring-boot-version>
        <spring-framework>5.1.3.RELEASE</spring-framework>
    </properties>
    <dependencies>
        <!--spring boot-->
        <dependency>
            <!-- Import dependency management from Spring Boot -->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-dependencies</artifactId>
            <version>${spring-boot-version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>${spring-boot-version}</version>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jetty</artifactId>
            <version>${spring-boot-version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
            <version>${spring-boot-version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j2</artifactId>
            <version>${spring-boot-version}</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>


        <!-- 格式化对象，方便输出日志 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.31</version>
        </dependency>


        <!-- 数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.15</version>
        </dependency>
        <!-- mysql 驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.30</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
            <version>${spring-boot-version}</version>
        </dependency>

        <!-- log4j -->
        <!-- https://mvnrepository.com/artifact/log4j/log4j -->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>


        <!--http start-->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpmime</artifactId>
            <version>4.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>${spring-boot-version}</version>
        </dependency>

        <!--测试依赖包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>${spring-boot-version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <!-- 表示开发的时候引入，发布的时候不会加载此包 -->
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.skyscreamer</groupId>
            <artifactId>jsonassert</artifactId>
            <version>1.5.0</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>${spring-framework}</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

注意：打包时候需要把前端文件打包进去。如果产生无法打包问题，填入如下代码

  <build>
        <resources>
            <resource>
                    <directory>src/main/resources/static</directory>

                <targetPath>${project.build.directory}/classes/static</targetPath>
            </resource>
            <resource>
                <directory>src/main/resources/templates</directory>

                <targetPath>${project.build.directory}/classes/templates</targetPath>
            </resource>
       </resources>
</build>

2.编写后端接口

此处自由发挥即可，注意传给前端的参数。本例中传入的是list

 @RequestMapping(value = "count",method = RequestMethod.GET)
    public ModelAndView count(){
       return new ModelAndView("interface/countNumber","interfaceList",operationLogService.getInterfaceCount());
    }

3.前端接收参数

默认路径如下：

resource/static/css，resource/static/js，resource/templates/自定义（与代码中return对应，本例中interface）/html页面名称

页面代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>接口使用统计</title>
    <link href="https://cdn.bootcss.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container ">
        <span class="navbar-brand text-center text-success" href="#">接口数据查看</span>
    </div>
</nav>

<div class="container">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#list" data-toggle="tab">
                列表
            </a>
        </li>
        <li><a href="#charts" data-toggle="tab">柱状图</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active panel panel-success" id="list">
            <table class="table table-bordered table-hover">
                <thead>
                <th>模块</th>
                <th>接口描述</th>
                <th>请求次数</th>
                </thead>
                <tr th:each="interface : ${interfaceList}">
                    <td th:text="${interface.module}"></td>
                    <td th:text="${interface.description}"></td>
                    <td th:text="${interface.accessCount}"></td>
                </tr>
            </table>
        </div>
        <div class="tab-pane fade container panel panel-success" id="charts" style="height: 500px;padding-top:20px;">

        </div>
    </div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        var interfaceList = /*[[${interfaceList}]]*/ null;
        var description=[];
        var num=[];
        var i=0;
        $.each(interfaceList, function(){

            description[i]=this.description;
            num[i]=this.accessCount;
            i++;
        });
        console.log(description);
        console.log(num);


        // 基于准备好的dom，初始化echarts实例
        var contentWidth =$("#myTabContent").width();
        $("#myTabContent").css("min-width",contentWidth);
        $("#charts").width(contentWidth-20);
        var myChart = echarts.init(document.getElementById('charts'));
        option = {
            title: {
                x: 'center',
                text: '接口访问统计',
                textStyle: {
                    color: '#ffffff'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            grid: {
                borderWidth: 0,
                y: 80,
                y2: 60
            },
            xAxis: [
                {
                    type: 'category',
                    show: false,
                    data: description
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: false
                }
            ],
            series: [
                {
                    name: '接口访问统计',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{b}\n{c}'
                            }
                        }
                    },
                    data: num
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
    /*]]>*/
</script>
</body>
</html>