Spring Boot整合Echarts对数据库表数据绘制静态数据柱状图、饼图

最新推荐文章于 2022-06-27 16:32:40 发布

会打碟的程序员

最新推荐文章于 2022-06-27 16:32:40 发布

阅读量944

点赞数

分类专栏： JAVA springboot Echarts 文章标签： Echarts 数据统计

本文链接：https://blog.csdn.net/sbw17608463386/article/details/103046928

版权

JAVA 同时被 3 个专栏收录

6 篇文章 1 订阅

订阅专栏

springboot

4 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

数据库表是一个简单制作的表有id，
（商品姓名）name，
（商品库存）repertoryNum，
（商品销量）saleNum 4个列

1.下载echarts

现在登录Echarts官网，找到下载界面，你会发现下载界面变成:
在这里插入图片描述
在这个界面你已经找不到完整版、精简版之类的，可以下载的全是代码，这对于小白来说，是不是一头雾水啊！没关系，接着往下看！！！

1.下载Echarts
网址：https://www.7down.com/soft/214165.html
点击下载。下载完后，解压如图所示
在这里插入图片描述
把echarts.min.js文件放到项目中。
项目目录:

注册静态资源： Configuration类在config文件夹里：

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@org.springframework.context.annotation.Configuration
public class Configuration implements WebMvcConfigurer {

    /**
     * 注册添加静态资源
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }

}

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.sbw</groupId>
    <artifactId>webspack</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>webspack</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.17</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.9</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.12</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>


        <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.10</version>
            <scope>provided</scope>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.2.0.RELEASE</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
            <version>2.2.0.RELEASE</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application.xml:

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/house?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
    username: root
    password: shebowen123
    driver-class-name: com.mysql.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    #initialization-mode: always
    #数据源其他配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
    #   配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

pagehelper:
  helper‐dialect: mysql

2.查询数据

1.对数据库数据进行树状统计，所以要从数据库把数据都查询出来
2.这里用到Springboot+SpringDataJpa进行的查询出表的数据
这里为了节约时间就只放了service实现类
在这里插入图片描述
controller层：


import com.sbw.webspack.pojo.Market;
import com.sbw.webspack.service.MarketService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class MarketController {
    @Autowired
    MarketService marketService;

    /**
     * 查询出数据库数据
     */
    @RequestMapping("/getAll")
    @ResponseBody
    public List<Market> getSaleNum() {
        return marketService.getAll();
    }

    /**
     * 销量界面
     *
     * @return
     */
    @RequestMapping("/gotoXl")
    public String xl() {
        return "index2";
    }

    /**
     * 库存界面
     *
     * @return
     */
    @RequestMapping("/gotoKc")
    public String kc() {
        return "index";
    }
}

3.HTML页面

库存树状图页面 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/jquery-1.12.4.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main"
     style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;">
</div>
<a href="/gotoXl">销量页面</a>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));//main是<div id="main">
    $.ajax({
        url: "getAll",   //调用查询全部接口
        success: function (data) {
            // 指定图表的配置项和数据
            var name = [];   //商品名称
            var repertoryNum = [];   //库存量
            for (var i = 0; i < data.length; i++) {
                name[i] = data[i].name;
                repertoryNum[i] = data[i].repertoryNum;
            }
            var option = {
                title: {
                    text: 'Market商品库存树状图'
                },
                tooltip: {},
                legend: {
                    data: ["库存"]
                },
                xAxis: {
                    data: name
                },
                yAxis: {},
                series: [{
                    name: '库存',
                    type: 'bar',
                    data: repertoryNum
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    })


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

**销量饼图页面 index1.html: **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/jquery-1.12.4.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main"
     style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;">
</div>
<a href="/gotoKc">库存页面</a>
<script type="text/javascript">
    $(document).ready(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var names = [];   //商品名称
        var data = [];    //data是饼图显示数据
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        $.ajax({
            url: "/getAll",
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name);
                        //插入数据变成[{value:...,name:....},{value:...,name:....}]格式
                        data[i] = {value: result[i].saleNum, name: result[i].name}
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption(
                        {
                            title: {
                                text: '商品销量',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: names
                            },
                            series: [
                                {
                                    name: '商品销量',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: data,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                    );
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax

    });//刷新方法结束
</script>
</body>
</html>