Spring Boot 2.x基礎教程：使用 ECharts 繪製各種華麗的資料圖表
上一節我們介紹瞭如何在Spring Boot中使用模板引擎Thymeleaf開發Web應用的基礎。接下來，我們介紹一下後端開發經常會遇到的一個場景：視覺化圖表。
通常，這類需求在客戶端應用中不太會用到，但是在後端的各種統計分析模組會經常碰到。比如：通過折線圖、柱狀圖、雷達圖等視覺化形式，更直觀的展現和分析經營狀況或系統執行情況。這裡我們將引入的資料視覺化元件庫 ECharts來幫助我們完成這樣的任務。
ECharts簡介
ECharts是百度開源的一個前端元件。它是一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴向量圖形庫 ZRender，提供直觀，互動豐富，可高度個性化定製的資料視覺化圖表。
它提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖、熱力圖、線圖，用於關係資料視覺化的關係圖、treemap、旭日圖，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。
除了已經內建的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函式，就可以從資料對映到任何你想要的圖形，更棒的是這些都還能和已有的互動元件結合使用而不需要操心其它事情。
你可以在下載介面下載包含所有圖表的構建檔案，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建檔案太大，也可以在線上構建中選擇需要的圖表型別後自定義構建。
- 官方網站：https://www.echartsjs.com/zh/index.html
- 案例頁面：https://www.echartsjs.com/examples/zh/index.html
動手試一試
第一步：建立一個基礎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>中通過<script>標籤引入ECharts的元件JS，這裡使用了bootcss的免費公共cdn。如果用於自己生產環境，不建議使用這類免費CDN的JS或者CSS等靜態資源。可以從官網下載所需的靜態內容，放到Spring Boot的靜態資源位置（如果不知道在哪，可見上一篇），或是放到自己公司的靜態資源管理的伺服器上，實現動靜分離。<body>中定義了一個id為main的<div>標籤，這個標籤後續將用來渲染EChart元件- 最後的一段
<script>內容則是具體的EChart圖示的展現初始化和配置。具體配置內容可見程式碼中的註釋資訊。
第五步：啟動應用，訪問localhost:8080，如果上面操作均無差錯，那我們就會得到類似下面的折線圖：
關於ECharts圖表的除錯，官方還提供了一個線上工具，有興趣的讀者可以點選這裡嘗試一下。
更多本系列免費教程連載「點選進入彙總目錄」
程式碼示例
本文的相關例子可以檢視下面倉庫中的chapter4-2目錄：
- Github：https://github.com/dyc87112/SpringBoot-Learning/
- Gitee：https://gitee.com/didispace/SpringBoot-Learning/
如果您覺得本文不錯，歡迎Star支援，您的關注是我堅持的動力！
歡迎關注我的公眾號：程式猿DD，獲得獨家整理的學習資源和日常乾貨推送。
如果您對我的專題內容感興趣，也可以關注我的部落格：didispace.com