基于Vue和ECharts實現(xiàn)定時更新與倒計時功能的實戰(zhàn)分享
更新時間：2025年01月02日 09:24:05 作者：碼農(nóng)阿豪@新空間代碼工作室
在前端開發(fā)中,動態(tài)數(shù)據(jù)展示和用戶交互是構(gòu)建現(xiàn)代 Web 應(yīng)用的核心需求之一,在本篇博客中,我們將通過一個簡單的案例,展示如何在 Vue 中結(jié)合 ECharts 實現(xiàn)一個定時更新和倒計時功能,用于實時監(jiān)控和數(shù)據(jù)可視化,需要的朋友可以參考下
基于 Vue 和 ECharts 實現(xiàn)定時更新與倒計時功能的實戰(zhàn)教程
背景與需求
假設(shè)你在開發(fā)一個數(shù)據(jù)監(jiān)控系統(tǒng)，系統(tǒng)需要實時展示數(shù)據(jù)，并且在特定時間間隔內(nèi)自動刷新數(shù)據(jù)。為了提升用戶體驗，你還希望在頁面上添加一個倒計時功能，倒計時結(jié)束后自動觸發(fā)刷新操作。常見的應(yīng)用場景有：
- 實時監(jiān)控某個系統(tǒng)的性能指標(biāo)（如 CPU 使用率、內(nèi)存消耗、請求延遲等）。
- 定時更新數(shù)據(jù)展示，保證數(shù)據(jù)顯示的時效性。
- 提供倒計時功能，增強頁面的交互性和用戶感知。
本篇文章通過一個完整的案例，展示如何在 Vue 項目中實現(xiàn)定時數(shù)據(jù)更新和倒計時功能，并結(jié)合 ECharts 展示實時數(shù)據(jù)。
項目概述
我們要實現(xiàn)的功能包含以下幾個部分：
- 時間選擇器：允許用戶選擇一個時間范圍。
- 確認(rèn)和刷新按鈕：用戶點擊確認(rèn)按鈕時，觸發(fā)數(shù)據(jù)請求，刷新顯示的數(shù)據(jù)。
- 倒計時顯示：在頁面上展示倒計時，倒計時結(jié)束后自動刷新數(shù)據(jù)。
- 四個監(jiān)控大屏：每個大屏顯示一塊 ECharts 圖表，實時展示數(shù)據(jù)。
接下來，我們將一步步分析如何實現(xiàn)這些功能。
實現(xiàn)步驟
1. 創(chuàng)建 Vue 項目和安裝 ECharts
首先，我們需要在 Vue 項目中安裝 ECharts。ECharts 是一個強大的數(shù)據(jù)可視化庫，能夠幫助我們輕松創(chuàng)建各種圖表?？梢酝ㄟ^以下命令安裝 ECharts：
npm install echarts --save
然后，我們在 Vue 組件中引入 ECharts。
2. 構(gòu)建組件結(jié)構(gòu)
首先，我們設(shè)計一個基礎(chǔ)的 Vue 組件結(jié)構(gòu)。該結(jié)構(gòu)包括：
- 時間選擇器：用戶可以選擇時間范圍。
- 確認(rèn)和刷新按鈕：分別用于確認(rèn)操作和刷新數(shù)據(jù)。
- 倒計時顯示：顯示倒計時并在結(jié)束時自動觸發(fā)刷新。
- 四個監(jiān)控大屏：使用 ECharts 展示數(shù)據(jù)。
<template>
<div class="dashboard">
<!-- 時間選擇器 -->
<el-date-picker
v-model="timeRange"
type="datetimerange"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="開始時間"
end-placeholder="結(jié)束時間"
class="date-picker"
></el-date-picker>
<!-- 確認(rèn)按鈕 -->
<el-button type="primary" @click="handleConfirmClick" :disabled="isRequesting" class="confirm-button">
確認(rèn)
</el-button>
<el-button type="primary" @click="handleRefreshClick" :disabled="isRequesting" class="confirm-button">
刷新
</el-button>
<!-- 倒計時顯示 -->
<div class="countdown">
<span>倒計時: {{ countdown }}</span>
</div>
<!-- 四個監(jiān)控大屏區(qū)域 -->
<div class="charts-container">
<!-- 第一塊圖表 -->
<div ref="chartContainer1" class="chart-item"></div>
<!-- 第二塊圖表 -->
<div ref="chartContainer2" class="chart-item"></div>
<!-- 第三塊圖表 -->
<div ref="chartContainer3" class="chart-item"></div>
<!-- 第四塊圖表 -->
<div ref="chartContainer4" class="chart-item"></div>
</div>
</div>
</template>
3. 定義數(shù)據(jù)與倒計時功能
我們在 data 中定義了時間選擇范圍、倒計時初始值、以及圖表數(shù)據(jù)。特別需要注意的是，倒計時功能的實現(xiàn)，我們將使用一個定時器來控制倒計時。
data() {
return {
chart1: null,
chart2: null,
chart3: null,
chart4: null,
timeRange: [], // 時間選擇器綁定的時間區(qū)間
countdown: 30, // 倒計時初始為30秒
xAxisData0: [
'2024-11-27 17:47:00', '2024-11-27 17:48:00', '2024-11-27 17:49:00',
'2024-11-27 17:50:00', '2024-11-27 17:51:00', '2024-11-27 17:52:00',
'2024-11-27 17:53:00', '2024-11-27 17:54:00', '2024-11-27 17:55:00',
'2024-11-27 17:56:00', '2024-11-27 17:57:00', '2024-11-27 17:58:00',
'2024-11-27 17:59:00', '2024-11-27 18:00:00', '2024-11-27 18:01:00',
'2024-11-27 18:02:00', '2024-11-27 18:03:00', '2024-11-27 18:04:00',
'2024-11-27 18:05:00', '2024-11-27 18:06:00'
],
yAxisData0: [
59670659, 65617664, 65220264,
59670659, 65617664, 65220264,
59670659, 65617664, 65220264,
59670659, 65617664, 65220264,
59670659, 65617664, 65220264,
59670659, 65617664, 65220264,
65617664, 65220264
],
pValues0: {
P99: [1000, 1200, 1100, 1300, 1000, 1500, 1250, 1100, 1300, 1000, 900, 800, 890, 970, 1000, 1200, 1100, 1000, 900, 900],
P97: [506, 503, 500, 552, 522, 532, 537, 548, 589, 603, 534, 531, 529, 724, 791, 543, 561, 646, 569, 568],
P95: [400, 400, 396, 435, 410, 419, 433, 442, 451, 451, 419, 415, 412, 511, 525, 432, 438, 472, 443, 450],
P90: [318, 317, 313, 327, 314, 319, 328, 333, 333, 330, 320, 316, 311, 360, 367, 335, 336, 348, 336, 347],
P75: [191, 190, 181, 188, 179, 183, 191, 194, 189, 186, 185, 179, 173, 206, 220, 207, 205, 206, 204, 213]
},
isRequesting: false, // 防止多次點擊確認(rèn)按鈕
refreshInterval: null // 定時器引用
}
}
4. 定時器和倒計時邏輯
在 mounted 鉤子中，我們啟動了一個定時器，每秒鐘減少倒計時的值。當(dāng)?shù)褂嫊r為零時，自動觸發(fā)刷新操作。
mounted() {
// 初始化時間范圍為當(dāng)前時間和15分鐘前的時間
const now = new Date()
const fifteenMinutesAgo = new Date(now.getTime() - 15 * 60 * 1000) // 當(dāng)前時間 - 15分鐘
// 設(shè)置時間格式化為 yyyy-MM-dd HH:mm:ss
const formatDate = (date) => {
const y = date.getFullYear()
const m = String(date.getMonth() + 1).padStart(2, '0')
const d = String(date.getDate()).padStart(2, '0')
const h = String(date.getHours()).padStart(2, '0')
const min = String(date.getMinutes()).padStart(2, '0')
const sec = String(date.getSeconds()).padStart(2, '0')
return `${y}-${m}-$ublnpf9mb ${h
}:${min}:${sec}`
}
this.timeRange = [formatDate(fifteenMinutesAgo), formatDate(now)]
// 啟動倒計時定時器
this.startCountdown()
// 初始化圖表
this.initCharts()
},
beforeDestroy() {
// 清除定時器
clearInterval(this.refreshInterval)
},
methods: {
startCountdown() {
this.refreshInterval = setInterval(() => {
if (this.countdown > 0) {
this.countdown -= 1
} else {
this.handleRefreshClick()
this.countdown = 30 // 重置倒計時
}
}, 1000)
},
// 刷新數(shù)據(jù)
handleRefreshClick() {
if (this.isRequesting) return
this.isRequesting = true
this.setChartOption()
setTimeout(() => {
this.isRequesting = false
alert('刷新成功')
}, 1000)
},
// 初始化圖表數(shù)據(jù)
setChartOption() {
const commonOption0 = {
xAxis: {
type: 'category',
data: this.xAxisData0
},
yAxis: {
type: 'value'
},
series: [
{
name: 'P99',
type: 'line',
data: this.pValues0.P99,
smooth: true,
lineStyle: { color: '#FF5722' }
},
{
name: 'P95',
type: 'line',
data: this.pValues0.P95,
smooth: true,
lineStyle: { color: '#FFEB3B' }
},
{
name: 'P90',
type: 'line',
data: this.pValues0.P90,
smooth: true,
lineStyle: { color: '#4CAF50' }
},
{
name: 'P75',
type: 'line',
data: this.pValues0.P75,
smooth: true,
lineStyle: { color: '#2196F3' }
}
]
}
// 設(shè)置圖表數(shù)據(jù)
this.chart1.setOption(commonOption0)
this.chart2.setOption(commonOption0)
this.chart3.setOption(commonOption0)
this.chart4.setOption(commonOption0)
}
}
總結(jié)
本文介紹了如何通過 Vue 和 ECharts 實現(xiàn)一個動態(tài)更新的儀表盤，展示了如何處理定時更新、倒計時和實時數(shù)據(jù)展示等功能。在實際開發(fā)中，這樣的功能通常應(yīng)用于監(jiān)控系統(tǒng)、財務(wù)報表展示、數(shù)據(jù)分析儀表盤等場景。通過結(jié)合 Vue 和 ECharts，我們可以輕松實現(xiàn)動態(tài)交互與數(shù)據(jù)可視化的功能，提高系統(tǒng)的實時性和用戶體驗。
在本教程中，我們講解了如何：
- 使用 Vue 構(gòu)建前端組件。
- 使用 ECharts 展示圖表數(shù)據(jù)。
- 實現(xiàn)倒計時功能和定時刷新機制。
這些技能對于開發(fā)實時監(jiān)控系統(tǒng)和數(shù)據(jù)可視化應(yīng)用非常有用，希望通過本篇文章能夠幫助大家深入理解 Vue 和 ECharts 的集成應(yīng)用。
以上就是基于Vue和ECharts實現(xiàn)定時更新與倒計時功能的實戰(zhàn)分享的詳細(xì)內(nèi)容，更多關(guān)于Vue ECharts定時更新與倒計時的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置
configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過對象或函數(shù)修改配置,簡單直接；chainWebpack則使用WebpackChainAPI,適合復(fù)雜配置,兩者可以結(jié)合使用,以達(dá)到更精細(xì)的配置需求,幫助開發(fā)者優(yōu)化項目構(gòu)建2024-10-10
這篇文章主要介紹了解決vue前后端端口不一致的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue中使用mockjs配置和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
要想實現(xiàn)列表的動態(tài)無縫滾動,本文為大家推薦兩款組件,vue-seamless-scroll和vue3-seamless-scroll,組件的用法也非常簡單,下面就跟隨小編一起來學(xué)習(xí)一下吧2024-11-11
vxe-table 是一個功能強大的 Vue 表格組件,它支持虛擬滾動列表作為其核心功能之一,本文主要介紹一下vxe-table的虛擬滾動列表功能的使用場景和優(yōu)勢,感興趣的可以了解下2023-12-12
這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來定義組件的自定義事件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于Vue插件從封裝到發(fā)布的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中
這篇文章主要介紹了Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10