SpringBoot+Echarts实现可视化图表（Thymeleaf，Vue3.0两种实现）

本篇文章主要讲解如何使用 SpringBoot+Thymeleaf+Echarts、以及 SpringBoot+VUE3.0+Echarts 两种方式，实现 Web 应用中的图标显示功能。

一、Echarts 概述

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

官网地址：Apache ECharts

官方文档地址：快速上手 - 使用手册 - Apache ECharts

官方案例地址：Examples - Apache ECharts

二、SpringBoot+Thymeleaf+Echarts

2.1 数据准备

本案例以某高校某系的 2021-2023 年考研数据为基础显示相应的数据统计图，数据库表如下：

DROP TABLE IF EXISTS `exam_stat`;
CREATE TABLE `exam_stat` (
  `id` int NOT NULL AUTO_INCREMENT,
  `exam_year` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL, -- 考研年份
  `college` varchar(50) DEFAULT NULL, -- 学院
  `major` varchar(50) DEFAULT NULL, -- 专业
  `total_num` int DEFAULT NULL, -- 专业总人数
  `exam_num` int DEFAULT NULL, -- 参加考试的人数
  `online_num` int DEFAULT NULL, -- 上线的人数
  `pass_num` int DEFAULT NULL,  -- 录取的人数
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb3;

-- ----------------------------
-- Records of exam_stat
-- ----------------------------
INSERT INTO `exam_stat` VALUES ('1', '2021', '计算机学院', '计算机科学与技术', '50', '6', '5', '10');
INSERT INTO `exam_stat` VALUES ('2', '2021', '计算机学院', '自动化', '45', '17', '8', '6');
INSERT INTO `exam_stat` VALUES ('3', '2021', '计算机学院', '软件工