👨🎓作者：bug菌
✏️博客：CSDN、掘金、infoQ、51CTO等
🎉简介：CSDN|阿里云|华为云|51CTO等社区博客专家，历届博客之星Top30，掘金年度人气作者Top40，51CTO年度博主Top12，掘金 | InfoQ | 51CTO等社区优质创作者，全网粉丝合计15w+ ；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板等海量资料。...
✍️温馨提醒：本文字数：1999字, 阅读完需：约 5 分钟
🏆本文收录于《Spring Boot从入门到精通》，专门攻坚指数提升。
本专栏致力打造最硬核 Spring Boot 从零基础到进阶系列学习内容，🚀均为全网独家首发，打造精品专栏，专栏持续更新中…欢迎大家订阅持续学习。
环境说明：Windows10 + Idea2021.3.2 + Jdk1.8 + SpringBoot 2.3.1.RELEASE
1. 前言
在前几期，我们重点学习了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础。接下来，我们介绍一下后端开发经常会遇到的一个场景：可视化图表。比如如下：
通常啊，这类业务在客户端应用中不太能用到，但在后端的各种统计分析模块会经常碰到这类业务。比如展示：折线图、柱状图、饼图、雷达图等可视化展示形式，更直观的展现和分析经营状况或系统运行情况。这里我们将引入的数据可视化组件库ECharts来帮助我们完成这样的任务。
那么，SpringBoot如何集成可视化组件库 ECharts来实现。这将又会是干货满满的一期，全程无尿点不废话只抓重点教，具有非常好的学习效果，拿好小板凳准备就坐！希望学习的过程中大家认真听好好学，学习的途中有任何不清楚或疑问的地方皆可评论区留言或私信，bug菌将第一时间给予解惑，那么废话不多说，直接开整！Fighting！！
2 . 环境说明
本地的开发环境：
- 开发工具：IDEA 2021.3
- JDK版本： JDK 1.8
- Spring Boot版本：2.3.1 RELEASE
- Maven版本：3.8.2
3. ECharts简介
3.1 概念
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上。能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。
3.2 特点
3.3 官网
大家可以去它的官网瞅瞅，各式各样的Echarts图例。
官方网站：Apache ECharts
图表示例：Examples - Apache ECharts
4. 集成Echarts🔥
接下来，我就来教大家如何在项目中引入其Echarts图表。 并且会达到能访问地址有图表完整展示效果，同学们可得好好听，认真学。
4.1 引入依赖
这里需要引入web模块和模板引擎thymeleaf模块，这里我们静态模板就用Thymeleaf。
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-thymeleaf
4.2 创建Controller类
这里我们定义一个Controller，将/路径的请求，映射到 eCharts.js 页面。
package com.example.demo.controller;
import io.swagger.annotations.Api;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/echarts")
@Api(tags = "echarts图表演示", description = "echarts图表演示")
public class EchartsController {
@GetMapping("/basic-line")
public String index() {
return "eCharts";
}
}
这里就不细讲为何是直接return 一个html 页面名了，懂得都懂。
4.3 创建html静态页面
这里我们创建一个静态html页面，命名为：eCharts.html.
新建一个 echarts.html 文件，为 ECharts 准备一个具备大小（宽高）的 Dom。
然后重点来了，我们需要引入我们需要展示的Echarts图表，比如，我们就拿Echarts官网第一个则线图来进行举例：
我们只需要将其option图表设置 直接复制放进到
SpringBoot使用ECharts图表演示
// 初始化ECharts组件到id为main的元素上
let myChart = echarts.init(document.getElementById('all'));
// 定义图标的配置项
let option = {
title: {
text: 'SpringBoot使用ECharts图表演示'
},
tooltip: {},
// x轴配置
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// y轴配置
yAxis: {
type: 'value'
},
series: [
{
// 数据集（也可以从后端的Controller中传入）
data: [150, 230, 224, 218, 135, 147, 260],
// 图表类型，这里使用line，为折线图
type: 'line'
}
]
};
myChart.setOption(option);
解读一下如上代码：
1.中通过标签引入ECharts的组件JS，这里静态引入本地的，实现动静分离。
2.中定义了一个id为all的标签，这个标签后续将用来渲染EChart组件最后的一段。
3.内容则是具体的EChart图标的展现初始化和配置。具体配置内容可见代码中的注释信息。
4.同如上点1，如果你直接引用bootcss的免费公共cdn，访问js时直接跨域导致无法正常引用。
如果有遇到此类问题，建议到直接从官网将该静态资源下载引入到本地，比如：我是将echarts.min.js 存放在 resources/static/js/ 下，这样就实现了从本地访问，如果有不清楚的同学为何要将静态资源放置到static目录下，可以参考我写的这篇《Spring Boot之静态资源映射》，超级详细。目录截图展示如下：
这里涉及到的 echarts.min.js 你们可以去我的 GitHub上自取，也可以从这个地址中直接另存为：cdn.bootcss.com/echarts/4.6…
4.4 启动访问
这里我们直接进行路径地址访问：比如我的：http://localhost:8080/echarts/basic-line
这个看大家具体项目路径设置，浏览器输入地址回车，如果上面操作均无差错，那我们就会得到下面的折线图：
5. 热文推荐
若想学习更多，可以参考这篇专栏总结《2023最新首发，全网最全 Spring Boot 学习宝典(附思维导图)》，本专栏致力打造最硬核 Spring Boot 进阶系列学习内容，🚀均为全网独家首发，打造精品专栏，专栏持续更新中。欢迎大家订阅持续学习。
在入门及进阶之途，我必助你一臂之力，系统性学习，从入门到精通，带你不走弯路，直奔终点；投资自己，永远性价比最高，都这么说了，你还不赶紧来学？？
本文涉及所有源代码，均已上传至github开源，供同学们一对一参考 GitHub传送门，
同时，原创开源不易，欢迎给个star🌟，想体验下被🌟的感jio，非常感谢❗
6. 文末
我是bug菌，CSDN | 阿里云 | 华为云 | 51CTO 等社区博客专家，历届博客之星Top30，掘金年度人气作者Top40，51CTO年度博主Top12，掘金 | InfoQ | 51CTO等社区优质创作者，全网粉丝合计15w+ ；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板等海量资料。
