在Spring Boot中使用ECharts繪制數據圖表

使用ECharts來完成一些花里胡哨的圖表吧，一般這種需求我們在我們的客戶端不太常見，但是，我們在后端進行各種數據統計的時候就會發現ECharts的優點了，比如我們常常做的柱狀圖，折線圖，雷達圖等可視化形式，可以更加直觀的展示和分析運營我們對系統運行狀態的情況。

那么ECharts究竟是啥？

ECharts是一個基于JavaScript的開源可視化庫，用于創建交互式的圖表和數據可視化。它由百度開發并維護，提供了豐富的圖表類型和靈活的配置選項，使開發者能夠輕松地在網頁中展示各種數據。

ECharts支持常見的圖表類型，如折線圖、柱狀圖、餅圖、散點圖、雷達圖等，并且提供了豐富的交互功能，如數據縮放、數據篩選、圖例切換等。它還支持動畫效果和響應式設計，可以適應不同的屏幕尺寸和設備。

ECharts提供了一個強大的配置項，可以通過JavaScript代碼來定義圖表的樣式、數據和交互行為。它還支持使用JSON格式的數據，方便與后端數據接口進行交互。

ECharts可以與各種前端框架和庫集成，包括Vue.js、React、Angular等，也可以在純JavaScript環境中使用。它的文檔詳細且易于理解，提供了豐富的示例和API參考，方便開發者學習和使用。

在這里插入圖片描述
ECharts官網：https://echarts.apache.org/examples/zh/index.html

我們在Spring Boot中使用ECharts繪制表格的第一步還是創建一個Spring Boot項目然后引入ECharts的依賴，在我們的項目中使用pom.xml或者build.gradle文件中添加相關依賴。

<!-- 如果使用Maven -->
<dependency><groupId>org.webjars</groupId><artifactId>echarts</artifactId><version>4.9.0</version>
</dependency>

當然，在后端使用主要在于我們用來傳遞數據罷了，我們可以通過創建一個控制類，然后再控制類里邊處理我們的相關代碼邏輯，例如：

@RestController
@RequestMapping("/chart")
public class ChartController {@GetMapping("/data")public Object getChartData() {// 在這里編寫代碼來獲取圖表數據// 返回的數據可以是一個包含圖表配置的JSON對象return yourChartData;}
}

之后，我們在HTML中引入一個ECharts的javaScript文件，可以通過WebJars來引入我們的ECharts；

<script src="/webjars/echarts/4.9.0/echarts.min.js"></script>

在我們的HtML中創建一個div用來存儲ECharts圖表，例如：

<div id="chartContainer"></div>

之后，我們可以通過向后端得到我們的數據，用來展示圖表數據，并通過ECharts的API進行繪制表格。

// 使用Ajax從服務器獲取圖表數據
$.ajax({url: '/chart/data',success: function(data) {// 使用ECharts繪制圖表var chart = echarts.init(document.getElementById('chartContainer'));chart.setOption(data);}
});

以上是我們在Spring Boot中使用ECharts的相關案例。以下我將采用直接在前端將數據渲染出來，不經過后臺。

我們使用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><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope></dependency>

第二步，創建一個index.html文件在resources/template下

<!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><div id="main1" style="width: 1000px;height:400px;"></div></body><script type="text/javascript">let myChart = echarts.init(document.getElementById('main'));let option = {title: {text: 'Spring Boot中使用ECharts'},tooltip: {},xAxis: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]};myChart.setOption(option);let myChart1 = echarts.init(document.getElementById('main1'));const dataBJ = [[55, 9, 56, 0.46, 18, 6, 1],[25, 11, 21, 0.65, 34, 9, 2],[56, 7, 63, 0.3, 14, 5, 3],[33, 7, 29, 0.33, 16, 6, 4],[42, 24, 44, 0.76, 40, 16, 5],[82, 58, 90, 1.77, 68, 33, 6],[74, 49, 77, 1.46, 48, 27, 7],[78, 55, 80, 1.29, 59, 29, 8],[267, 216, 280, 4.8, 108, 64, 9],[185, 127, 216, 2.52, 61, 27, 10],[39, 19, 38, 0.57, 31, 15, 11],[41, 11, 40, 0.43, 21, 7, 12],[64, 38, 74, 1.04, 46, 22, 13],[108, 79, 120, 1.7, 75, 41, 14],[108, 63, 116, 1.48, 44, 26, 15],[33, 6, 29, 0.34, 13, 5, 16],[94, 66, 110, 1.54, 62, 31, 17],[186, 142, 192, 3.88, 93, 79, 18],[57, 31, 54, 0.96, 32, 14, 19],[22, 8, 17, 0.48, 23, 10, 20],[39, 15, 36, 0.61, 29, 13, 21],[94, 69, 114, 2.08, 73, 39, 22],[99, 73, 110, 2.43, 76, 48, 23],[31, 12, 30, 0.5, 32, 16, 24],[42, 27, 43, 1, 53, 22, 25],[154, 117, 157, 3.05, 92, 58, 26],[234, 185, 230, 4.09, 123, 69, 27],[160, 120, 186, 2.77, 91, 50, 28],[134, 96, 165, 2.76, 83, 41, 29],[52, 24, 60, 1.03, 50, 21, 30],[46, 5, 49, 0.28, 10, 6, 31]];const dataGZ = [[26, 37, 27, 1.163, 27, 13, 1],[85, 62, 71, 1.195, 60, 8, 2],[78, 38, 74, 1.363, 37, 7, 3],[21, 21, 36, 0.634, 40, 9, 4],[41, 42, 46, 0.915, 81, 13, 5],[56, 52, 69, 1.067, 92, 16, 6],[64, 30, 28, 0.924, 51, 2, 7],[55, 48, 74, 1.236, 75, 26, 8],[76, 85, 113, 1.237, 114, 27, 9],[91, 81, 104, 1.041, 56, 40, 10],[84, 39, 60, 0.964, 25, 11, 11],[64, 51, 101, 0.862, 58, 23, 12],[70, 69, 120, 1.198, 65, 36, 13],[77, 105, 178, 2.549, 64, 16, 14],[109, 68, 87, 0.996, 74, 29, 15],[73, 68, 97, 0.905, 51, 34, 16],[54, 27, 47, 0.592, 53, 12, 17],[51, 61, 97, 0.811, 65, 19, 18],[91, 71, 121, 1.374, 43, 18, 19],[73, 102, 182, 2.787, 44, 19, 20],[73, 50, 76, 0.717, 31, 20, 21],[84, 94, 140, 2.238, 68, 18, 22],[93, 77, 104, 1.165, 53, 7, 23],[99, 130, 227, 3.97, 55, 15, 24],[146, 84, 139, 1.094, 40, 17, 25],[113, 108, 137, 1.481, 48, 15, 26],[81, 48, 62, 1.619, 26, 3, 27],[56, 48, 68, 1.336, 37, 9, 28],[82, 92, 174, 3.29, 0, 13, 29],[106, 116, 188, 3.628, 101, 16, 30],[118, 50, 0, 1.383, 76, 11, 31]];const dataSH = [[91, 45, 125, 0.82, 34, 23, 1],[65, 27, 78, 0.86, 45, 29, 2],[83, 60, 84, 1.09, 73, 27, 3],[109, 81, 121, 1.28, 68, 51, 4],[106, 77, 114, 1.07, 55, 51, 5],[109, 81, 121, 1.28, 68, 51, 6],[106, 77, 114, 1.07, 55, 51, 7],[89, 65, 78, 0.86, 51, 26, 8],[53, 33, 47, 0.64, 50, 17, 9],[80, 55, 80, 1.01, 75, 24, 10],[117, 81, 124, 1.03, 45, 24, 11],[99, 71, 142, 1.1, 62, 42, 12],[95, 69, 130, 1.28, 74, 50, 13],[116, 87, 131, 1.47, 84, 40, 14],[108, 80, 121, 1.3, 85, 37, 15],[134, 83, 167, 1.16, 57, 43, 16],[79, 43, 107, 1.05, 59, 37, 17],[71, 46, 89, 0.86, 64, 25, 18],[97, 71, 113, 1.17, 88, 31, 19],[84, 57, 91, 0.85, 55, 31, 20],[87, 63, 101, 0.9, 56, 41, 21],[104, 77, 119, 1.09, 73, 48, 22],[87, 62, 100, 1, 72, 28, 23],[168, 128, 172, 1.49, 97, 56, 24],[65, 45, 51, 0.74, 39, 17, 25],[39, 24, 38, 0.61, 47, 17, 26],[39, 24, 39, 0.59, 50, 19, 27],[93, 68, 96, 1.05, 79, 29, 28],[188, 143, 197, 1.66, 99, 51, 29],[174, 131, 174, 1.55, 108, 50, 30],[187, 143, 201, 1.39, 89, 53, 31]];const lineStyle = {width: 1,opacity: 0.5};option = {backgroundColor: '#161627',title: {text: 'AQI - Radar',left: 'center',textStyle: {color: '#eee'}},legend: {bottom: 5,data: ['Beijing', 'Shanghai', 'Guangzhou'],itemGap: 20,textStyle: {color: '#fff',fontSize: 14},selectedMode: 'single'},radar: {indicator: [{ name: 'AQI', max: 300 },{ name: 'PM2.5', max: 250 },{ name: 'PM10', max: 300 },{ name: 'CO', max: 5 },{ name: 'NO2', max: 200 },{ name: 'SO2', max: 100 }],shape: 'circle',splitNumber: 5,axisName: {color: 'rgb(238, 197, 102)'},splitLine: {lineStyle: {color: ['rgba(238, 197, 102, 0.1)','rgba(238, 197, 102, 0.2)','rgba(238, 197, 102, 0.4)','rgba(238, 197, 102, 0.6)','rgba(238, 197, 102, 0.8)','rgba(238, 197, 102, 1)'].reverse()}},splitArea: {show: false},axisLine: {lineStyle: {color: 'rgba(238, 197, 102, 0.5)'}}},series: [{name: 'Beijing',type: 'radar',lineStyle: lineStyle,data: dataBJ,symbol: 'none',itemStyle: {color: '#F9713C'},areaStyle: {opacity: 0.1}},{name: 'Shanghai',type: 'radar',lineStyle: lineStyle,data: dataSH,symbol: 'none',itemStyle: {color: '#B3E4A1'},areaStyle: {opacity: 0.05}},{name: 'Guangzhou',type: 'radar',lineStyle: lineStyle,data: dataGZ,symbol: 'none',itemStyle: {color: 'rgb(238, 197, 102)'},areaStyle: {opacity: 0.05}}]};myChart1.setOption(option);</script>
</html>

創建一個控制類，用來幫助我們訪問前端界面。

@Controller
public class HelloController {@GetMapping("/")public String index(ModelMap map) {// return模板文件的名稱，對應src/main/resources/templates/index.htmlreturn "index";}}

通過http://localhost:8080
在這里插入圖片描述
具體的更多圖的引入：
在這里插入圖片描述
在這里插入圖片描述

在這里插入圖片描述
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/161243.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/161243.shtml
英文地址，請注明出處：http://en.pswp.cn/news/161243.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Mac M1 安裝Docker打包arm64的python項目的鏡像包

Mac M1 安裝Docker打包arm64的python項目的鏡像包

1、首先安裝Docker&#xff0c;到官網下載&#xff0c;選擇apple chip版 Docker中文網 官網 2、雙擊下載的dmg文件&#xff0c;在彈出框中之間拖拽到右邊 3、打開docker&#xff0c;修改國內鏡像源&#xff0c;位置在配置-DockerEngine "registry-mirrors": ["…
閱讀更多...
『亞馬遜云科技產品測評』活動征文｜AWS 數據庫產品類別及其適用場景詳細說明

『亞馬遜云科技產品測評』活動征文｜AWS 數據庫產品類別及其適用場景詳細說明

授權聲明&#xff1a;本篇文章授權活動官方亞馬遜云科技文章轉發、改寫權&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒體平臺&#xff0c;第三方開發者媒體等亞馬遜云科技官方渠道 目錄 前言、AWS 數據庫產品類別 01、Amazon Aurora 02、Amazon Docum…
閱讀更多...
基于STM32的手勢識別算法研究與應用

基于STM32的手勢識別算法研究與應用

基于STM32的手勢識別算法在人機交互和智能設備控制中具有重要的應用價值。本文將介紹基于STM32的手勢識別算法的研究原理和實現步驟&#xff0c;并提供相應的代碼示例。 1. 手勢識別概述 手勢識別是一種通過分析人體的手部動作和姿勢來識別和理解人的意圖的技術。基于STM32的…
閱讀更多...
YOLOv5 分類模型 數據集加載 3

YOLOv5 分類模型 數據集加載 3

YOLOv5 分類模型 數據集加載 3 自定義類別 flyfish YOLOv5 分類模型 數據集加載 1 樣本處理 YOLOv5 分類模型 數據集加載 2 切片處理 YOLOv5 分類模型的預處理&#xff08;1&#xff09; Resize 和 CenterCrop YOLOv5 分類模型的預處理&#xff08;2&#xff09;ToTensor 和 …
閱讀更多...
scrapy自定義日志

scrapy自定義日志

自定義日志系統 首先&#xff0c;在Scrapy的settings.py文件中添加以下代碼&#xff1a; LOG_LEVEL DEBUG # 日志級別 LOG_FILE /path/to/logfile.log # 日志文件路徑 LOG_ENABLED True # 是否啟用日志 LOG_STDOUT False # 是否輸出到標準輸出這些設置將指定Scrapy日…
閱讀更多...
【PHP】PHP生成全年日歷

【PHP】PHP生成全年日歷

&#x1f449;博__主&#x1f448;&#xff1a;米碼收割機 &#x1f449;技__能&#x1f448;&#xff1a;C/Python語言 &#x1f449;公眾號&#x1f448;&#xff1a;測試開發自動化【獲取源碼商業合作】 &#x1f449;榮__譽&#x1f448;&#xff1a;阿里云博客專家博主、5…
閱讀更多...
5-8輸出水仙花數

5-8輸出水仙花數

#include<stdio.h> int main(){int i,j,k;int n;for(n100;n<1000;n){in/100;jn/10-i*10;kn%10;if(ni*i*ij*j*jk*k*k)printf("%d ",n);}printf("\n");return 0; }
閱讀更多...
Dubbo從入門到上天系列第十八篇：Dubbo引入注冊中心簡介以及DubboAdmin簡要介紹，為后續詳解Dubbo各種注冊中心做鋪墊！

Dubbo從入門到上天系列第十八篇：Dubbo引入注冊中心簡介以及DubboAdmin簡要介紹，為后續詳解Dubbo各種注冊中心做鋪墊！

一&#xff1a;Dubbo注冊中心引言 1&#xff1a;什么是Dubbo的注冊中心&#xff1f; Dubbo注冊中心是Dubbo服務治理中極其重要的一個概念。它主要是用于對Rpc集群應用實例進行管理。 對于我們的Dubbo服務來講&#xff0c;至少有兩部分構成&#xff0c;一部分是Provider一部分是…
閱讀更多...
uniapp開發小程序-如何判斷小程序是在手機端還是pc端打開

uniapp開發小程序-如何判斷小程序是在手機端還是pc端打開

官方說明 https://developers.weixin.qq.com/miniprogram/dev/devtools/pc-dev.html 小程序如何判斷是 PC 平臺&#xff1f; 通過 getSystemInfo 官方接口&#xff08;platform 是 windows&#xff09; 通過 UA&#xff08;PC UA 包含 MiniProgramEnv/Windows&#xff09; …
閱讀更多...
section header

section header

section header table 是一個section header的集合&#xff0c;每個section header是一個描述section的結構體。在同一個ELF文件中&#xff0c;每個section header大小是相同的。 每個section都有一個section header描述它&#xff0c;但是一個section header可能在文件中沒有…
閱讀更多...
云計算實驗如何結合AI來提高效率！

云計算實驗如何結合AI來提高效率！

隨著AI助手的流行&#xff0c;我們現在無論是學習還是工作都會帶著一個他/她&#xff0c;如何讓AI助手提高我們的工作效率是我們需要進化的方向。下面結合“云計算實驗”來分享一下如何讓AI幫助我們學得更快學得更好。 一、學習某個軟件或復雜命令 比如在學習RockyLinux9.2中…
閱讀更多...
Android Spannable 使用?注意事項

Android Spannable 使用?注意事項

1、當前示例中間的 "評論"&#xff0c;使用SpannableStringBuilder實現&#xff0c;點擊評論會有高亮效果加粗&#xff0c;但再點擊其它Bar時無法恢復默認樣式。 2、因為SpannableString或SpannableStringBuilder中的效果是疊加的&#xff0c;恢復默認樣式需要先移除…
閱讀更多...
【Qt-25】控件篇

【Qt-25】控件篇

一、comboBox控件 1、獲取item數量 ui->comboBox_2->count(); 2、根據索引值獲取文本 ui->comboBox->itemText(i); 3、調整當前顯示文本內容 ui->comboBox->setCurrentIndex(j); 4、添加item ui->comboBox->addItem("");//添加一個內…
閱讀更多...
基于SSM的濟南旅游網站設計與實現

基于SSM的濟南旅游網站設計與實現

末尾獲取源碼 開發語言&#xff1a;Java Java開發工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 數據庫&#xff1a;MySQL5.7和Navicat管理工具結合 服務器&#xff1a;Tomcat8.5 開發軟件&#xff1a;IDEA / Eclipse 是否Maven項目&#xff1a;是 目錄…
閱讀更多...
汽車級全保護型六路半橋驅動器NCV7708FDWR2G 原理、參數及應用

汽車級全保護型六路半橋驅動器NCV7708FDWR2G 原理、參數及應用

NCV7708FDWR2G 是一款全保護型六路半橋驅動器&#xff0c;特別適用于汽車和工業運動控制應用。六個高壓側和低壓側驅動器可自由配置&#xff0c;也可單獨控制。因此可實現高壓側、低壓側和 H 橋控制。H 橋控制提供正向、逆向、制動和高阻抗狀態。驅動器通過標準 SPI 接口進行控…
閱讀更多...
python 基于gdal，richdem，pysheds實現 實現洼填、D8流向，匯流累計量計算，河網連接，分水嶺及其水文分析與斜坡單元生成

python 基于gdal，richdem，pysheds實現 實現洼填、D8流向，匯流累計量計算，河網連接，分水嶺及其水文分析與斜坡單元生成

python gdal實現水文分析算法及其斜坡單元生成 實現洼填、D8流向，匯流累計量計算，河網連接，分水嶺 # utf-8 import richdem as rdre from River import * from pysheds.grid import Grid import time from time import time,sleep import numpy as np from osgeo import g…
閱讀更多...
【Pytorch】Visualization of Fature Maps（2）

【Pytorch】Visualization of Fature Maps（2）

學習參考來自 使用CNN在MNIST上實現簡單的攻擊樣本https://github.com/wmn7/ML_Practice/blob/master/2019_06_03/CNN_MNIST%E5%8F%AF%E8%A7%86%E5%8C%96.ipynb 文章目錄 在 MNIST 上實現簡單的攻擊樣本1 訓練一個數字分類網絡2 控制輸出的概率, 看輸入是什么3 讓正確的圖片分…
閱讀更多...
分類預測 | Matlab實現基于DBN-SVM深度置信網絡-支持向量機的數據分類預測

分類預測 | Matlab實現基于DBN-SVM深度置信網絡-支持向量機的數據分類預測

分類預測 | Matlab實現基于DBN-SVM深度置信網絡-支持向量機的數據分類預測 目錄 分類預測 | Matlab實現基于DBN-SVM深度置信網絡-支持向量機的數據分類預測分類效果基本描述程序設計參考資料 分類效果 基本描述 1.利用DBN進行特征提取&#xff0c;將提取后的特征放入SVM進行分類…
閱讀更多...
vue中 多個請求，如果一個請出錯，頁面繼續執行

vue中 多個請求，如果一個請出錯，頁面繼續執行

vue中 多個請求&#xff0c;如果一個請出錯&#xff0c;頁面繼續執行 在Vue中&#xff0c;可以通過Promise.all()方法來處理多個請求&#xff0c;即使其中一個請求出錯&#xff0c;頁面也可以繼續執行其他的邏輯。 下面是一個示例代碼&#xff0c;演示了如何在Vue中處理多個請…
閱讀更多...
Cookie與Session

Cookie與Session

文章目錄 Cookie的介紹Cookie的由來什么是CookieCookie原理Cookie覆蓋瀏覽器查看Cookie 在Django中操作Cookie設置Cookie查詢瀏覽器攜帶的Cookie刪除Cookie Cookie校驗登錄session Cookie的介紹 Cookie的由來 首先我們都應該明白HTTP協議是無連接的。 無狀態的意思是每次請求…
閱讀更多...
最新文章

Copyright @ 2022~2023