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

数据库表是一个简单制作的表有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>

树状图和饼图不是限定的我选的是比较普通的，想要更好看的可以参考Echarts官网
https://www.echartsjs.com/examples/zh/index.html#chart-type-pie

页面展示

• 点赞
• 收藏
• 分享
• 文章举报