SpringBoot+Thymeleaf+ECharts實現(xiàn)大數(shù)據(jù)可視化(基礎(chǔ)篇)
0x01 新建SpringBoot項目
1. 新建maven工程
a. Spring Initializr -> Default（Project SDK要自行裝好并配置好）
b. Group、Artifact等可隨意修改，注意修改此處Java Version為自己相應(yīng)的版本（可能會默認(rèn)是11），其他的使用默認(rèn)即可：
c. 勾選Web（可能你的版本已經(jīng)變?yōu)?code>Spring Web）、Thymeleaf，項目會自動加上依賴：
d. 項目名稱與項目位置，可自行修改：
e. 此處可能會顯示此窗口，其實就是提示是否要新打開一個窗口顯示而已，此處選哪個沒關(guān)系：
點擊后，IDEA右下角有滑條在跳動，其實是在下載相關(guān)依賴，稍等一會后就不再閃動了。
2. 編寫HelloWorld程序代碼
a. 新建一個HelloController類：
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @Auther: 邵奈一
* @Date: 2019/01/30 下午 4:36
* @Description: HelloController控制器
*/
@Controller
public class HelloController {
@RequestMapping("/")
public String sayHello(){
return "index";
}
}
b. 在templates目錄下新建一個index.html界面并添加代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello World!
</body>
</html>
c. 點擊綠色小箭頭，然后打開瀏覽器，輸入（localhost:8080），可看到：
0x02 引入ECharts資源
1. 獲取JQuery與ECharts資源
a. 下載ECharts和JQuery的js文件，并在static目錄新建js文件夾，然后復(fù)制echarts.min.js與jquery-3.1.1.js到此文件夾：
ECharts地址：http://echarts.baidu.com/download.html
JQuery地址：https://jquery.com/download/
說明：現(xiàn)在的鏈接網(wǎng)頁界面已經(jīng)發(fā)生改變，大家可以不下載，直接引入CDN即可。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
2. 新建ECharts模版html文件
a. 新建demo.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<!-- 如果你沒有echarts.min.js文件，用下面的語句代替即可
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
3. 添加后臺java代碼
a. 在HelloController中添加myDemo方法：
@RequestMapping("/demo")
public String myDemo(){
return "demo";
}
4. ECharts模版樣式預(yù)覽
a. 重啟項目，打開瀏覽器（localhost:8080/demo），可看到：
0x03 SpringBoot整合Thymeleaf
1. 新建myECharts方法
a. 在HelloController中添加myECharts方法：
@RequestMapping("/echarts")
public String myECharts(Model model){
String skirt = "裙子";
int nums = 30;
model.addAttribute("skirt", skirt);
model.addAttribute("nums", nums);
return "echarts";
}
2. 引入Thymeleaf
a. 復(fù)制一份demo.html，修改成echarts.html,在<html>添加Themeleaf相關(guān)信息（最后一步有總覽圖）：xmlns:th=www.thymeleaf.org
b. 引入jquery文件：
<script src="js/jquery-3.1.1.js"></script>
注意：如果沒有jquery-3.1.1.js文件，則使用下面的語句代替：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
c. 在<div>下面添加代碼：
<input type="hidden" th:value="${skirt}" id="skirt"/>
<input type="hidden" th:value="${nums}" id="nums"/>d. 在<script type="text/javascript">里面添加代碼：
var skirt=$("#skirt").val();
var nums=$("#nums").val();e. 修改data的代碼為變量skirt、nums：
xAxis: {
data: [skirt,"羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
series: [{
name: '銷量',
type: 'bar',
data: [nums, 20, 36, 10, 10, 20]
}]
f. echarts.html完整代碼：
<!DOCTYPE html>
<html lang="en" xmlns:th=www.thymeleaf.org>
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
<!-- 如果你沒有相應(yīng)的js文件，用下面的語句代替即可：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<input type="hidden" th:value="${skirt}" id="skirt"/>
<input type="hidden" th:value="${nums}" id="nums"/>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var skirt=$("#skirt").val();
var nums=$("#nums").val();
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: [skirt,"羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [nums, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
3. ECharts新樣式預(yù)覽
a. 重啟項目，打開瀏覽器（localhost:8080/echarts），可看到：
4. 模式升級
a. 將echarts.html的兩行代碼注釋掉
<input type="hidden" th:value="${skirt}" id="skirt"/>
<input type="hidden" th:value="${nums}" id="nums"/>b. 將這兩行代碼：
var skirt=$("#skirt").val();
var nums=$("#nums").val();換成：
var skirt="[[${skirt}]]";
var nums="[[${nums}]]";其實效果是一樣的！請自己思考一下，為什么效果是一樣的？！
0xFF 總結(jié)
本教程從HelloWorld開始，一步一步進(jìn)階為顯示ECharts靜態(tài)界面，再到接收后臺傳送過來的數(shù)據(jù)，整合了前后臺Thymeleaf與SpringBoot，為開發(fā)非常重要的一步；需要特別注意路徑問題。
需要自己學(xué)習(xí)一下HTML、CSS、JS的相關(guān)知識。
進(jìn)階教程請查看文章：SpringBoot+JSON+AJAX+ECharts+Fiddler實現(xiàn)前后端分離開發(fā)可視化（進(jìn)階篇），通過實戰(zhàn)例子，技能包含JSON、Ajax、跨域問題解決等等。
到此這篇關(guān)于SpringBoot+Thymeleaf+ECharts實現(xiàn)大數(shù)據(jù)可視化（基礎(chǔ)篇）的文章就介紹到這了,更多相關(guān)SpringBoot+Thymeleaf+ECharts可視化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- springboot集成druid,多數(shù)據(jù)源可視化,p6spy問題
- 基于springboot實現(xiàn)數(shù)據(jù)可視化的示例代碼
- SpringBoot+thymeleaf+Echarts+Mysql 實現(xiàn)數(shù)據(jù)可視化讀取的示例
- SpringBoot Admin 如何實現(xiàn)Actuator端點可視化監(jiān)控
- SpringBoot可視化接口開發(fā)工具magic-api的簡單使用教程
- SpringBoot+ECharts是如何實現(xiàn)數(shù)據(jù)可視化的
- Springboot添加jvm監(jiān)控實現(xiàn)數(shù)據(jù)可視化
- 基于SpringBoot和PostGIS的某國基地可視化實戰(zhàn)
相關(guān)文章
Springboot事件和bean生命周期執(zhí)行機(jī)制實例詳解
這篇文章主要介紹了Springboot事件和bean的生命周期執(zhí)行機(jī)制,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
詳解關(guān)于SpringBoot的外部化配置使用記錄
這篇文章主要介紹了詳解關(guān)于SpringBoot的外部化配置使用記錄,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家介紹了java題解LeetCode20.有效的括號示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
IDEA整合SSM框架實現(xiàn)網(wǎng)頁上顯示數(shù)據(jù)
最近做了個小項目，該項目包在intellij idea中實現(xiàn)了ssm框架的整合以及實現(xiàn)訪問，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
License指的是版權(quán)許可證，當(dāng)我們開發(fā)完系統(tǒng)后，如果不想讓用戶一直白嫖使用，比如說按時間續(xù)費，License的作用就有了。我們可以給系統(tǒng)指定License的有效期，控制系統(tǒng)的可用時間。2021-06-06
Java日常練習(xí)題,每天進(jìn)步一點點(36)
下面小編就為大家?guī)硪黄狫ava基礎(chǔ)的幾道練習(xí)題(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望可以幫到你2021-07-07
java8 Stream list to Map key 重復(fù) value合并到Collectio的操作
這篇文章主要介紹了java8 Stream list to Map key 重復(fù) value合并到Collectio的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
簡單講解Java設(shè)計模式編程中的單一職責(zé)原則
這篇文章主要介紹了Java設(shè)計模式編程中的單一職責(zé)原則,這在團(tuán)隊開發(fā)編寫接口時經(jīng)常使用這樣的約定,需要的朋友可以參考下2016-02-02
Spring @Value 設(shè)置默認(rèn)值的實現(xiàn)
這篇文章主要介紹了Spring @Value 設(shè)置默認(rèn)值的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了解決SpringBoot引用別的模塊無法注入的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02