如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化（入门详细教程）

各大技术基础教学、实战开发教学（最新更新时间2022-1-3）

断更挺久了，今天开始恢复教程文章，感谢大家一路的支持，话不多说，开始今天的教学之旅

今天要介绍的是如何实现通过SpringBoot+Vue前后端分离，将数据从数据库传递给前端达到echarts图形的展示

先看看效果图，图形中的数据是数据库中，不是假数据

​

目录

======

数据部分

后端

创建一个SpringBoot项目

Application配置

Book类（bean数据层）

BookRepository接口类（DAO数据访问层）

BookService接口类（业务层）

BookServiceImpl实现类（业务层）

BookController类（控制层）

跨域请求处理

启动后端项目

Vue前端

vue脚手架创建项目

编写前端代码

（1）引入axios和echarts，全局配置

（2）App.vue

（3）Home.vue

（4）echarts图形使用

​axios请求后端接口数据

动态加载echarts数据源

---

数据部分

====

我这里就以这个图书信息作为今天教程讲解的数据部分，从中提取图书名称(name)和图书数量(num)

​

后端

==

我们先从后端敲起，定义好RESTful接口，这里我们采用集成JPA来访问操作数据库

创建一个SpringBoot项目

---