SpringBoot项目+Echart数据展示+poi 实现批量导入导出

ddfabc

已于 2022-11-29 18:02:25 修改

阅读量825

点赞数 1

文章标签： spring boot 后端 java

于 2022-11-29 18:02:10 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60459789/article/details/128100521

版权

Tip：本期使用的是SpringBoot框架整合MySQL跟Echarts使用案例和springboot+poi实现导出excel的实例，通过本次案例你能学到SpringBoot里面的Echarts如何获取MySQL里面的数据制作简单图形跟excel并导出导入的需求。

1、项目结构：

用Spring Initializr创建

添加 Lombok,Spring Web,Thymeleaf,MySQL Driver

最近springboot版本跟新了，注意要选3.0一下的版本，因为3.0的版本最低要求JDK17，目前用的是JDK1.8

先讲Echart数据展示

首先需要引入入echarts.min.js和jquery.js

<!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>

再建两个div用来显示图形

<div id="main" style="width: 1000px;height:400px;"></div>
<br/>
<div id="pie" style="width: 1000px;height:400px;"></div>

html界面和ajax

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<table border="1">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>类型</th>
        <th>操作</th>
    </tr>
    <tr th:each="list:${list}">
        <td th:text="${list.id}"></td>
        <td th:text="${list.name}"></td>
        <td th:text="${list.price}"></td>
        <td th:text="${list.count}"></td>
        <td th:text="${list.types.tyname}"></td>
        <td><a th:href="@{'/byId/'+${list.id}}">修改</a> &nbsp;&nbsp; <a
                th:href="@{'/deleteId/'+${list.id}+'/'+${list.type}}">删除</a></td>
    </tr>
</table>

<a th:href="@{/downExcel}">导出数据</a>
<form th:action="@{/importExcel}" method="post" enctype="multipart/form-data">
    <input type="file" name="excel">
    <input type="submit" value="数据导入">
</form>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<br/>
<div id="pie" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">

    //初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main'));
    myChart1.showLoading();
    //指定图表的配置项和数据
    var names = []; //类别数组（实际放x轴坐标值）
    var nums = []; //库存数组（Y坐标值）
    var price = []; //价格数组（Y坐标值）
    $.ajax({
        type: "get",
        url: "/list",
        dataType: "json",
        async: false,
        success: function (result) {
            for (var i = 0; i < result.length; i++) {
                names.push(result[i].name);
                nums.push(result[i].count);
                price.push(result[i].price);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.readyState);//当数据请求失败可以查看请求的状态
        }
    });

    myChart1.hideLoading();//隐藏加载动画
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '超

最低0.47元/天解锁文章