当前位置：首页 > news >正文

【SpringBoot】15 Echarts+Thymeleaf 绘制各种图表

news 2025/7/14 1:04:48

Gitee仓库

https://gitee.com/Lin_DH/system

介绍

ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
它提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
Echarts官网 https://echarts.apache.org/zh/index.html
在这里插入图片描述

实现代码

折线图

EchartsController.java

package com.lm.system.controller;import io.swagger.annotations.Api;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;/*** @author DUHAOLIN* @date 2024/10/15*/
@Controller //返回页面
@Api(tags = "echarts")
public class EchartsController {@GetMapping("lineChart")public String lineChart(ModelMap map) {return "lineChart"; //折线图}}

lineChart.html

<!DOCTYPE html>
<html lang="en">
<head lang="en"><meta charset="UTF-8" /><title>Spring Boot中使用ECharts</title><!--  下载地址 https://www.jsdelivr.com/package/npm/echarts  --><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body><script type="text/javascript">// 初始化ECharts组件到id为main的元素上let lineChart = echarts.init(document.getElementById('main'));// 定义图标的配置项let option = {title: {text: 'ECharts 折线图'},tooltip: {},// x轴配置xAxis: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y轴配置yAxis: {},series: [{// 数据集（也可以从后端的Controller中传入）data: [150, 230, 224, 218, 135, 147, 260],// 图表类型，这里使用line，为折线图type: 'line'}]};lineChart.setOption(option);
</script>
</html>

折线图堆叠

EchartsController.java

在 EchartsController 类中添加 stackedLineChart 方法。

@GetMapping("stackedLineChart")
public String stackedLineChart(ModelMap map) {return "stackedLineChart"; //折线图堆叠
}

stackedLineChart.html

<!DOCTYPE html>
<html lang="en">
<head lang="en"><meta charset="UTF-8" /><title>ECharts 折线图堆叠</title><!--  下载地址 https://www.jsdelivr.com/package/npm/echarts  --><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body><script type="text/javascript">// 初始化ECharts组件到id为main的元素上let stackedLineChart = echarts.init(document.getElementById('main'));// 定义图标的配置项let option = {title: {text: 'ECharts 折线图堆叠'},tooltip: { trigger: 'axis' },legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},// x轴配置xAxis: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y轴配置yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]};stackedLineChart.setOption(option);
</script>
</html>

柱状图

EchartsController.java

在 EchartsController 类中添加 barChart 方法。

@GetMapping("barChart")
public String barChart (ModelMap map) {return "barChart"; //柱状图
}

barChart.html

<!DOCTYPE html>
<html lang="en">
<head lang="en"><meta charset="UTF-8" /><title>ECharts 柱状图</title><!--  下载地址 https://www.jsdelivr.com/package/npm/echarts  --><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body><script type="text/javascript">// 初始化ECharts组件到id为main的元素上let barChart = echarts.init(document.getElementById('main'));// 定义图标的配置项let option = {title: {text: 'ECharts 柱状图'},tooltip: {},// x轴配置xAxis: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y轴配置yAxis: {},series: [{// 数据集（也可以从后端的Controller中传入）data: [150, 230, 224, 218, 135, 147, 260],// 图表类型，这里使用line，为折线图type: 'bar'}]};barChart.setOption(option);
</script>
</html>

饼状图

EchartsController.java

在 EchartsController 类中添加 pieChart 方法。

@GetMapping("pieChart")
public String pieChart (ModelMap map) {return "pieChart"; //饼状图
}

pieChart.html

<!DOCTYPE html>
<html lang="en">
<head lang="en"><meta charset="UTF-8" /><title>ECharts 饼状图</title><!--  下载地址 https://www.jsdelivr.com/package/npm/echarts  --><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body><script type="text/javascript">// 初始化ECharts组件到id为main的元素上let pieChart = echarts.init(document.getElementById('main'));// 定义图标的配置项let option = {title: {text: 'ECharts 饼状图',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};pieChart.setOption(option);
</script>
</html>

效果图

折线图

在这里插入图片描述

折线图堆叠

在这里插入图片描述

柱状图

在这里插入图片描述

饼状图

在这里插入图片描述

项目结构图

在这里插入图片描述

Gitee仓库

介绍

实现代码

折线图

折线图堆叠

柱状图

饼状图

效果图

折线图

折线图堆叠

柱状图

饼状图

项目结构图

相关文章：