How to Integrate ECharts into a Spring Boot Application for Dynamic Charts
This tutorial demonstrates how to add Baidu's ECharts JavaScript visualization library to a Spring Boot backend, covering project setup, Maven dependencies, controller creation, Thymeleaf template configuration, and rendering a line chart in the browser.
In the previous section we covered using Thymeleaf in Spring Boot. This article shows how to add data‑visualization charts to a Spring Boot backend using the ECharts library.
ECharts Overview
ECharts is an open‑source JavaScript visualization library from Baidu that runs on PC and mobile browsers, supports many chart types such as line, bar, pie, map, heatmap, and allows custom series via a renderItem function.
Official site and examples are listed.
Hands‑On Guide
Step 1 : Create a basic Spring Boot project (or reuse the previous chapter4‑1 project).
Step 2 : Add the web and Thymeleaf starters to pom.xml:
<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>Step 3 : Create a controller that maps “/” to the index.html template:
@Controller
public class HelloController {
@GetMapping("/")
public String index(ModelMap map) {
return "index";
}
}Step 4 : Add index.html under resources/templates with the following content (including the ECharts script from a CDN, a div with id “main”, and the chart initialization code):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Spring Boot with ECharts</title>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:400px;"></div>
<script type="text/javascript">
// initialize chart
let myChart = echarts.init(document.getElementById('main'));
let option = {
title: { text: 'Spring Boot with ECharts' },
tooltip: {},
xAxis: { data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },
yAxis: {},
series: [{ data: [820,932,901,934,1290,1330,1320], type: 'line' }]
};
myChart.setOption(option);
</script>
</body>
</html>The page consists of three parts: the <head> loads ECharts, the <body> provides a container for the chart, and the final script configures and renders a simple line chart.
Step 5 : Run the application and visit http://localhost:8080. If everything is correct, a line chart similar to the screenshot below will appear.
ECharts also provides an online editor for debugging charts (see the example link).
The related source code can be found in the chapter4-2 directory of the GitHub/Gitee repositories.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Programmer DD
A tinkering programmer and author of "Spring Cloud Microservices in Action"
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.