Spring Boot 2.x基礎(chǔ)教程：使用ECharts繪制各種華麗的數(shù)據(jù)圖表

管理

編輯

刪除

CRMEB 2025-02-27 14:50:15

暫不處理

ECharts簡(jiǎn)介

ECharts是百度開源的一個(gè)前端組件。它是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

它提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日?qǐng)D，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

除了已經(jīng)內(nèi)置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個(gè)renderItem函數(shù)，就可以從數(shù)據(jù)映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結(jié)合使用而不需要操心其它事情。

你可以在下載界面下載包含所有圖表的構(gòu)建文件，如果只是需要其中一兩個(gè)圖表，又嫌包含所有圖表的構(gòu)建文件太大，也可以在在線構(gòu)建中選擇需要的圖表類型后自定義構(gòu)建。

官方網(wǎng)站：https://www.echartsjs.com/zh/index.html
案例頁面：https://www.echartsjs.com/examples/zh/index.html

#動(dòng)手試一試

第一步：創(chuàng)建一個(gè)基礎(chǔ)Spring Boot應(yīng)用，或者拿上一節(jié)的工程chapter4-1（倉庫地址見文末）來進(jìn)行加工。

第二步：在pom.xml中引入Web應(yīng)用需要的web模塊和模板引擎thymeleaf模塊，比如用Thymeleaf的時(shí)候：

<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>

第三步：編寫一個(gè)Controller，將/路徑的請(qǐng)求，映射到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'));
    // 定義圖標(biāo)的配置項(xiàng)
    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>標(biāo)簽引入ECharts的組件JS，這里使用了bootcss的免費(fèi)公共cdn。如果用于自己生產(chǎn)環(huán)境，不建議使用這類免費(fèi)CDN的JS或者CSS等靜態(tài)資源?？梢詮墓倬W(wǎng)下載所需的靜態(tài)內(nèi)容，放到Spring Boot的靜態(tài)資源位置（如果不知道在哪，可見上一篇open in new window），或是放到自己公司的靜態(tài)資源管理的服務(wù)器上，實(shí)現(xiàn)動(dòng)靜分離。
<body>中定義了一個(gè)id為main的<div>標(biāo)簽，這個(gè)標(biāo)簽后續(xù)將用來渲染EChart組件
最后的一段<script>內(nèi)容則是具體的EChart圖標(biāo)的展現(xiàn)初始化和配置。具體配置內(nèi)容可見代碼中的注釋信息。

第五步：?jiǎn)?dòng)應(yīng)用，訪問localhost:8080，如果上面操作均無差錯(cuò)，那我們就會(huì)得到類似下面的折線圖：