SpringBoot+Thymeleaf+ECharts實(shí)現(xiàn)大數(shù)據(jù)可視化(基礎(chǔ)篇)
0x01 新建SpringBoot項(xiàng)目
1. 新建maven工程
a. Spring Initializr -> Default（Project SDK要自行裝好并配置好）
b. Group、Artifact等可隨意修改，注意修改此處Java Version為自己相應(yīng)的版本（可能會(huì)默認(rèn)是11），其他的使用默認(rèn)即可：
c. 勾選Web（可能你的版本已經(jīng)變?yōu)?code>Spring Web）、Thymeleaf，項(xiàng)目會(huì)自動(dòng)加上依賴：
d. 項(xiàng)目名稱與項(xiàng)目位置，可自行修改：
e. 此處可能會(huì)顯示此窗口，其實(shí)就是提示是否要新打開一個(gè)窗口顯示而已，此處選哪個(gè)沒關(guān)系：
點(diǎn)擊后，IDEA右下角有滑條在跳動(dòng)，其實(shí)是在下載相關(guān)依賴，稍等一會(huì)后就不再閃動(dòng)了。
2. 編寫HelloWorld程序代碼
a. 新建一個(gè)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目錄下新建一個(gè)index.html界面并添加代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello World!
</body>
</html>
c. 點(diǎn)擊綠色小箭頭，然后打開瀏覽器，輸入（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)備一個(gè)具備大?。▽捀撸┑?DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
3. 添加后臺(tái)java代碼
a. 在HelloController中添加myDemo方法：
@RequestMapping("/demo")
public String myDemo(){
return "demo";
}
4. ECharts模版樣式預(yù)覽
a. 重啟項(xiàng)目，打開瀏覽器（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)備一個(gè)具備大小（寬高）的 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實(shí)例
var myChart = echarts.init(document.getElementById('main'));
var skirt=$("#skirt").val();
var nums=$("#nums").val();
// 指定圖表的配置項(xiàng)和數(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]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
3. ECharts新樣式預(yù)覽
a. 重啟項(xiàng)目，打開瀏覽器（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}]]";其實(shí)效果是一樣的！請自己思考一下，為什么效果是一樣的？！
0xFF 總結(jié)
本教程從HelloWorld開始，一步一步進(jìn)階為顯示ECharts靜態(tài)界面，再到接收后臺(tái)傳送過來的數(shù)據(jù)，整合了前后臺(tái)Thymeleaf與SpringBoot，為開發(fā)非常重要的一步；需要特別注意路徑問題。
需要自己學(xué)習(xí)一下HTML、CSS、JS的相關(guān)知識。
進(jìn)階教程請查看文章：SpringBoot+JSON+AJAX+ECharts+Fiddler實(shí)現(xiàn)前后端分離開發(fā)可視化（進(jìn)階篇），通過實(shí)戰(zhàn)例子，技能包含JSON、Ajax、跨域問題解決等等。
到此這篇關(guān)于SpringBoot+Thymeleaf+ECharts實(shí)現(xiàn)大數(shù)據(jù)可視化（基礎(chǔ)篇）的文章就介紹到這了,更多相關(guān)SpringBoot+Thymeleaf+ECharts可視化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- springboot集成druid,多數(shù)據(jù)源可視化,p6spy問題
- 基于springboot實(shí)現(xiàn)數(shù)據(jù)可視化的示例代碼
- SpringBoot+thymeleaf+Echarts+Mysql 實(shí)現(xiàn)數(shù)據(jù)可視化讀取的示例
- SpringBoot Admin 如何實(shí)現(xiàn)Actuator端點(diǎn)可視化監(jiān)控
- SpringBoot可視化接口開發(fā)工具magic-api的簡單使用教程
- SpringBoot+ECharts是如何實(shí)現(xiàn)數(shù)據(jù)可視化的
- Springboot添加jvm監(jiān)控實(shí)現(xiàn)數(shù)據(jù)可視化
- 基于SpringBoot和PostGIS的某國基地可視化實(shí)戰(zhàn)
相關(guān)文章
IDEA生成servlet程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了IDEA生成servlet程序的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Java中的權(quán)限修飾符(protected)示例詳解
這篇文章主要給大家介紹了關(guān)于Java中權(quán)限修飾符(protected)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Java筆記之從IO模型到Netty框架學(xué)習(xí)初識篇
Netty作為一個(gè)已經(jīng)發(fā)展了十多年的框架，已然非常成熟了，其中有大量的細(xì)節(jié)是普通使用者不知道或者不關(guān)心的，本文帶你查缺補(bǔ)漏掌握Netty的使用2022-03-03
Java中notify()和notifyAll()的使用區(qū)別
本文主要介紹了Java中notify()和notifyAll()的使用區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2021-06-06
Spring MVC文件上傳大小和類型限制以及超大文件上傳bug問題
這篇文章主要介紹了Spring MVC文件上傳大小和類型限制以及超大文件上傳bug問題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Java中的ThreadPoolExecutor線程池詳解,當(dāng)線程池中的線程數(shù)大于 corePoolSize 時(shí),keepAliveTime 為多余的空閑線程等待新任務(wù)的最長時(shí)間,超過這個(gè)時(shí)間后多余的線程將被終止,需要的朋友可以參考下2023-12-12
這篇文章主要讓我們理解MVC模式和三層架構(gòu)的基礎(chǔ)知識，有興趣的同學(xué)可以閱讀，借鑒參考一下2023-03-03
IDEA 自定義方法注解模板的實(shí)現(xiàn)方法
這篇文章主要介紹了IDEA 自定義方法注解模板的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
MyBatis 中 ${}和 #{}的正確使用方法(千萬不要亂用)
這篇文章主要介紹了MyBatis 中 ${}和 #{}的正確使用方法,本文給大家提到了MyBatis 中 ${}和 #{}的區(qū)別，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
Java實(shí)現(xiàn)人臉識別登錄、注冊等功能(最新完整版)
這段時(shí)間由于學(xué)校實(shí)行靜態(tài)化管理，寢室門和校門都是用了人臉識別的裝置，本系列項(xiàng)目從設(shè)計(jì)到實(shí)現(xiàn)源碼全部開源免費(fèi)學(xué)習(xí)使用，對Java實(shí)現(xiàn)人臉識別登錄、注冊功能感興趣的朋友一起看看吧2022-05-05