上一節(jié)我們介紹了如何在Spring Boot中使用模板引擎Thymeleaf開發(fā)Web應(yīng)用的基礎(chǔ)浓利。接下來，我們介紹一下后端開發(fā)經(jīng)常會遇到的一個場景：可視化圖表的妖。
通常绅喉，這類需求在客戶端應(yīng)用中不太會用到，但是在后端的各種統(tǒng)計分析模塊會經(jīng)常碰到颈抚。比如：通過折線圖踩衩、柱狀圖、雷達圖等可視化形式，更直觀的展現(xiàn)和分析經(jīng)營狀況或系統(tǒng)運行情況驱富。這里我們將引入的數(shù)據(jù)可視化組件庫 ECharts來幫助我們完成這樣的任務(wù)锚赤。
ECharts簡介
ECharts是百度開源的一個前端組件。它是一個使用 JavaScript 實現(xiàn)的開源可視化庫褐鸥，可以流暢的運行在 PC 和移動設(shè)備上线脚，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome叫榕，F(xiàn)irefox浑侥，Safari等），底層依賴矢量圖形庫 ZRender晰绎，提供直觀寓落，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表寒匙。
它提供了常規(guī)的折線圖零如、柱狀圖躏将、散點圖锄弱、餅圖、K線圖祸憋，用于統(tǒng)計的盒形圖会宪，用于地理數(shù)據(jù)可視化的地圖、熱力圖蚯窥、線圖掸鹅，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap拦赠、旭日圖巍沙，多維數(shù)據(jù)可視化的平行坐標，還有用于 BI 的漏斗圖荷鼠，儀表盤句携，并且支持圖與圖之間的混搭。
除了已經(jīng)內(nèi)置的包含了豐富功能的圖表允乐，ECharts 還提供了自定義系列矮嫉，只需要傳入一個renderItem函數(shù)，就可以從數(shù)據(jù)映射到任何你想要的圖形牍疏，更棒的是這些都還能和已有的交互組件結(jié)合使用而不需要操心其它事情蠢笋。
你可以在下載界面下載包含所有圖表的構(gòu)建文件，如果只是需要其中一兩個圖表鳞陨，又嫌包含所有圖表的構(gòu)建文件太大昨寞，也可以在在線構(gòu)建中選擇需要的圖表類型后自定義構(gòu)建。
- 官方網(wǎng)站：https://www.echartsjs.com/zh/index.html
- 案例頁面：https://www.echartsjs.com/examples/zh/index.html
動手試一試
第一步：創(chuàng)建一個基礎(chǔ)Spring Boot應(yīng)用，或者拿上一節(jié)的工程chapter4-1（倉庫地址見文末）來進行加工援岩。
第二步：在pom.xml中引入Web應(yīng)用需要的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目錄下創(chuàng)建index.html頁面蹂匹，具體內(nèi)容如下：
<!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: [{
// 數(shù)據(jù)集（也可以從后端的Controller中傳入）
data: [820, 932, 901, 934, 1290, 1330, 1320],
// 圖表類型，這里使用line凹蜈，為折線圖
type: 'line'
}]
};
myChart.setOption(option);
</script>
</html>
在頁面內(nèi)容中主要包含三部分：
-
<head>中通過<script>標簽引入ECharts的組件JS限寞，這里使用了bootcss的免費公共cdn。如果用于自己生產(chǎn)環(huán)境仰坦，不建議使用這類免費CDN的JS或者CSS等靜態(tài)資源履植。可以從官網(wǎng)下載所需的靜態(tài)內(nèi)容悄晃，放到Spring Boot的靜態(tài)資源位置（如果不知道在哪玫霎，可見上一篇），或是放到自己公司的靜態(tài)資源管理的服務(wù)器上妈橄，實現(xiàn)動靜分離庶近。 -
<body>中定義了一個id為main的<div>標簽，這個標簽后續(xù)將用來渲染EChart組件 - 最后的一段
<script>內(nèi)容則是具體的EChart圖標的展現(xiàn)初始化和配置眷蚓。具體配置內(nèi)容可見代碼中的注釋信息鼻种。
第五步：啟動應(yīng)用，訪問localhost:8080沙热，如果上面操作均無差錯叉钥，那我們就會得到類似下面的折線圖：
關(guān)于ECharts圖表的調(diào)試，官方還提供了一個在線工具篙贸，有興趣的讀者可以點擊這里嘗試一下投队。
更多本系列免費教程連載「點擊進入?yún)R總目錄」
代碼示例
本文的相關(guān)例子可以查看下面?zhèn)}庫中的chapter4-2目錄：
- Github：https://github.com/dyc87112/SpringBoot-Learning/
- Gitee：https://gitee.com/didispace/SpringBoot-Learning/
如果您覺得本文不錯，歡迎Star支持爵川，您的關(guān)注是我堅持的動力敷鸦！
歡迎關(guān)注我的公眾號：程序猿DD，獲得獨家整理的學習資源和日常干貨推送雁芙。
如果您對我的專題內(nèi)容感興趣轧膘，也可以關(guān)注我的博客：didispace.com
