我們介紹了如何在Spring Boot中使用模闆引擎Thymeleaf開發Web應用的基礎。接下來,我們介紹一下後端開發經常會遇到的一個場景:可視化圖表。
通常,這類需求在用戶端應用中不太會用到,但是在後端的各種統計分析子產品會經常碰到。比如:通過折線圖、柱狀圖、雷達圖等可視化形式,更直覺的展現和分析經營狀況或系統運作情況。這裡我們将引入的資料可視化元件庫 ECharts來幫助我們完成這樣的任務。
https://blog.didispace.com/spring-boot-learning-21-4-2/#ECharts%E7%AE%80%E4%BB%8B ECharts簡介
ECharts是百度開源的一個前端元件。它是一個使用 JavaScript 實作的開源可視化庫,可以流暢的運作在 PC 和移動裝置上,相容目前絕大部分浏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直覺,互動豐富,可高度個性化定制的資料可視化圖表。
它提供了正常的折線圖、柱狀圖、散點圖、餅圖、K線圖,用于統計的盒形圖,用于地理資料可視化的地圖、熱力圖、線圖,用于關系資料可視化的關系圖、treemap、旭日圖,多元資料可視化的平行坐标,還有用于 BI 的漏鬥圖,儀表盤,并且支援圖與圖之間的混搭。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SZygTYyEWM0IGZ3MTZzATYjZDZ0UzNxEDOhlzN3gDZ58CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
除了已經内置的包含了豐富功能的圖表,ECharts 還提供了自定義系列,隻需要傳入一個renderItem函數,就可以從資料映射到任何你想要的圖形,更棒的是這些都還能和已有的互動元件結合使用而不需要操心其它事情。
你可以在下載下傳界面下載下傳包含所有圖表的建構檔案,如果隻是需要其中一兩個圖表,又嫌包含所有圖表的建構檔案太大,也可以在線上建構中選擇需要的圖表類型後自定義建構。
- 官方網站: https://www.echartsjs.com/zh/index.html
- 案例頁面: https://www.echartsjs.com/examples/zh/index.html
https://blog.didispace.com/spring-boot-learning-21-4-2/#%E5%8A%A8%E6%89%8B%E8%AF%95%E4%B8%80%E8%AF%95 動手試一試
第一步:建立一個基礎Spring Boot應用,或者拿上一節的工程chapter4-1(倉庫位址見文末)來進行加工。
第二步:在
pom.xml
中引入Web應用需要的
web子產品
和模闆引擎
thymeleaf子產品
,比如用Thymeleaf的時候:
<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>
第三步:編寫一個Controller,将
/
路徑的請求,映射到
index.html
頁面
@Controller
public class HelloController {
@GetMapping("/")
public String index(ModelMap map) {
return "index";
}
}
第四步:在
resources/templates
目錄下建立
index.html
頁面,具體内容如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>Spring Boot中使用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>
</body>
<script type="text/javascript">
// 初始化ECharts元件到id為main的元素上
let myChart = echarts.init(document.getElementById('main'));
// 定義圖示的配置項
let option = {
title: {
text: 'Spring Boot中使用ECharts'
},
tooltip: {},
// x軸配置
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// y軸配置
yAxis: {},
series: [{
// 資料集(也可以從後端的Controller中傳入)
data: [820, 932, 901, 934, 1290, 1330, 1320],
// 圖表類型,這裡使用line,為折線圖
type: 'line'
}]
};
myChart.setOption(option);
</script>
</html>
在頁面内容中主要包含三部分:
-
中通過<head>
标簽引入ECharts的元件JS,這裡使用了bootcss的免費公共cdn。如果用于自己生産環境,不建議使用這類免費CDN的JS或者CSS等靜态資源。可以從官網下載下傳所需的靜态内容,放到Spring Boot的靜态資源位置(如果不知道在哪,可見 上一篇 ),或是放到自己公司的靜态資源管理的伺服器上,實作動靜分離。<script>
-
中定義了一個id為main的<body>
标簽,這個标簽後續将用來渲染EChart元件<div>
- 最後的一段
内容則是具體的EChart圖示的展現初始化和配置。具體配置内容可見代碼中的注釋資訊。<script>
第五步:啟動應用,通路
localhost:8080
,如果上面操作均無差錯,那我們就會得到類似下面的折線圖:
關于ECharts圖表的調試,官方還提供了一個線上工具,有興趣的讀者可以
點選這裡嘗試一下。
代碼示例
本文的相關例子可以檢視下面倉庫中的
chapter4-2
目錄:
- Github: https://github.com/dyc87112/SpringBoot-Learning/
- Gitee: https://gitee.com/didispace/SpringBoot-Learning/