任务描述
任务要求
使用IDEA开发工具构建一个项目多模块工程。study-springboot-chapter11学习关于Springboot集成可视化图表echarts知识点
- 基于study-springboot工程，复制study-springboot-chapter00标准项目，坐标groupId（com.cbitedu）、artifactId(study-springboot-chapter11)，其他默认
- 继承study-springboot工程依赖
- 可视化图表echarts实现前端图表开发
任务收获
- Spring Boot中整合可视化图表echarts
- 学会使用JUnit完成单元测试
- 掌握web开发原理
- 熟悉SpringMVC的基础配置
任务准备
环境要求
- JDK1.8+
- MySQL8.0.27+
- Maven 3.6.1+
- IDEA/VSCode
工程目录要求
study-springboot-chapter11
任务实施
通常，这类需求在客户端应用中不太会用到，但是在后端的各种统计分析模块会经常碰到。比如：通过折线图、柱状图、雷达图等可视化形式，更直观的展现和分析经营状况或系统运行情况。这里我们将引入的数据可视化组件库 ECharts来帮助我们完成这样的任务。
ECharts简介
ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
它提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。
动手试一试
第一步：创建一个基础Spring Boot应用，或者拿个人云盘上的标准工程：study-springboot-chapter00项目来进行加工。
修改application.yml
#服务配置
server:
port: 81
# #设置日志相关打印sql 语句
logging:
level:
com.cbitedu: debug
org.springframework.web: debug
#关闭运行日志图标（banner）
spring:
datasource:
url: jdbc:mysql://localhost:3306/platform?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
#Thymeleaf模板引擎相关配置
thymeleaf:
#prefix：指定模板所在的目录
prefix: classpath:/templates/
#check-tempate-location: 检查模板路径是否存在
check-template-location: true
#cache: 是否缓存，开发模式下设置为false，避免改了模板还要重启服务器，线上设置为true，可以提高性能。
cache: false
#suffix 配置模板后缀名
suffix: .html
encoding: UTF-8
mode: HTML5
devtools:
restart:
enabled: true #设置开启热部署
additional-paths: src/main/java #重启目录
exclude: static/**,public/**,db/**,i18n/**,templates/** #排除文件(不重启项目)
第二步：在pom.xml中引入Web应用需要的web模块和模板引擎thymeleaf模块，比如用Thymeleaf的时候：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
第三步：编写一个Controller，将/路径的请求，映射到echarts.html页面
package com.cbitedu.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class Echarts {
/**
* 图表
*/
@RequestMapping("/echarts")
public ModelAndView getCharts(){
return new ModelAndView("/echarts");
}
}
第四步：在resources/static下引入echarts.js（官网下载即可）同时在resources/templates目录下创建echarts.html页面，具体内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="/js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 柱状图'
},
tooltip: {},
legend: {
data:['得分']
},
xAxis: {
data: ["哈登","杜兰特","戴维斯","詹姆斯","阿德托昆博","恩比德","利拉德","沃克","伦纳德","拉文"]
},
yAxis: {},
series: [{
name: '得分',
type: 'bar',
data: [30.6, 30.0, 28.2, 27.8, 27.6, 27.0,27.0,26.5,25.5,25.0]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// myChart.setOption({
// series : [
// {
// name: '访问来源',
// type: 'pie',
// radius: '55%',
// data:[
// {value:235, name:'视频广告'},
// {value:274, name:'联盟广告'},
// {value:310, name:'邮件营销'},
// {value:335, name:'直接访问'},
// {value:400, name:'搜索引擎'}
// ]
// }
// ]
// })
</script>
</body>
</html>
在页面内容中主要包含三部分：
- 中通过
-
中定义了一个id为main的标签，这个标签后续将用来渲染EChart组件
- 最后的一段
第五步：启动应用，访问localhost:81/echarts/，如果上面操作均无差错，那我们就会得到类似下面的柱状图：
