快捷導(dǎo)航

基于Vue和ECharts實(shí)現(xiàn)定時(shí)更新與倒計(jì)時(shí)功能的實(shí)戰(zhàn)分享

更新時(shí)間：2025年01月02日 09:24:05 作者：碼農(nóng)阿豪@新空間代碼工作室

在前端開發(fā)中,動態(tài)數(shù)據(jù)展示和用戶交互是構(gòu)建現(xiàn)代 Web 應(yīng)用的核心需求之一,在本篇博客中,我們將通過一個(gè)簡單的案例,展示如何在 Vue 中結(jié)合 ECharts 實(shí)現(xiàn)一個(gè)定時(shí)更新和倒計(jì)時(shí)功能,用于實(shí)時(shí)監(jiān)控和數(shù)據(jù)可視化,需要的朋友可以參考下

基于 Vue 和 ECharts 實(shí)現(xiàn)定時(shí)更新與倒計(jì)時(shí)功能的實(shí)戰(zhàn)教程

背景與需求

假設(shè)你在開發(fā)一個(gè)數(shù)據(jù)監(jiān)控系統(tǒng)，系統(tǒng)需要實(shí)時(shí)展示數(shù)據(jù)，并且在特定時(shí)間間隔內(nèi)自動刷新數(shù)據(jù)。為了提升用戶體驗(yàn)，你還希望在頁面上添加一個(gè)倒計(jì)時(shí)功能，倒計(jì)時(shí)結(jié)束后自動觸發(fā)刷新操作。常見的應(yīng)用場景有：

實(shí)時(shí)監(jiān)控某個(gè)系統(tǒng)的性能指標(biāo)（如 CPU 使用率、內(nèi)存消耗、請求延遲等）。
定時(shí)更新數(shù)據(jù)展示，保證數(shù)據(jù)顯示的時(shí)效性。
提供倒計(jì)時(shí)功能，增強(qiáng)頁面的交互性和用戶感知。

本篇文章通過一個(gè)完整的案例，展示如何在 Vue 項(xiàng)目中實(shí)現(xiàn)定時(shí)數(shù)據(jù)更新和倒計(jì)時(shí)功能，并結(jié)合 ECharts 展示實(shí)時(shí)數(shù)據(jù)。

項(xiàng)目概述

我們要實(shí)現(xiàn)的功能包含以下幾個(gè)部分：

時(shí)間選擇器：允許用戶選擇一個(gè)時(shí)間范圍。
確認(rèn)和刷新按鈕：用戶點(diǎn)擊確認(rèn)按鈕時(shí)，觸發(fā)數(shù)據(jù)請求，刷新顯示的數(shù)據(jù)。
倒計(jì)時(shí)顯示：在頁面上展示倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后自動刷新數(shù)據(jù)。
四個(gè)監(jiān)控大屏：每個(gè)大屏顯示一塊 ECharts 圖表，實(shí)時(shí)展示數(shù)據(jù)。

接下來，我們將一步步分析如何實(shí)現(xiàn)這些功能。

實(shí)現(xiàn)步驟

1. 創(chuàng)建 Vue 項(xiàng)目和安裝 ECharts

首先，我們需要在 Vue 項(xiàng)目中安裝 ECharts。ECharts 是一個(gè)強(qiáng)大的數(shù)據(jù)可視化庫，能夠幫助我們輕松創(chuàng)建各種圖表。可以通過以下命令安裝 ECharts：

npm install echarts --save

然后，我們在 Vue 組件中引入 ECharts。

2. 構(gòu)建組件結(jié)構(gòu)

首先，我們設(shè)計(jì)一個(gè)基礎(chǔ)的 Vue 組件結(jié)構(gòu)。該結(jié)構(gòu)包括：

時(shí)間選擇器：用戶可以選擇時(shí)間范圍。
確認(rèn)和刷新按鈕：分別用于確認(rèn)操作和刷新數(shù)據(jù)。
倒計(jì)時(shí)顯示：顯示倒計(jì)時(shí)并在結(jié)束時(shí)自動觸發(fā)刷新。
四個(gè)監(jiān)控大屏：使用 ECharts 展示數(shù)據(jù)。

<template>
  <div class="dashboard">
    <!-- 時(shí)間選擇器 -->
    <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="開始時(shí)間"
      end-placeholder="結(jié)束時(shí)間"
      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>

    <!-- 倒計(jì)時(shí)顯示 -->
    <div class="countdown">
      <span>倒計(jì)時(shí): {{ countdown }}</span>
    </div>

    <!-- 四個(gè)監(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ù)與倒計(jì)時(shí)功能

我們在 data 中定義了時(shí)間選擇范圍、倒計(jì)時(shí)初始值、以及圖表數(shù)據(jù)。特別需要注意的是，倒計(jì)時(shí)功能的實(shí)現(xiàn)，我們將使用一個(gè)定時(shí)器來控制倒計(jì)時(shí)。

data() {
  return {
    chart1: null,
    chart2: null,
    chart3: null,
    chart4: null,
    timeRange: [],  // 時(shí)間選擇器綁定的時(shí)間區(qū)間
    countdown: 30,  // 倒計(jì)時(shí)初始為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, // 防止多次點(diǎn)擊確認(rèn)按鈕
    refreshInterval: null // 定時(shí)器引用
  }
}

4. 定時(shí)器和倒計(jì)時(shí)邏輯

在 mounted 鉤子中，我們啟動了一個(gè)定時(shí)器，每秒鐘減少倒計(jì)時(shí)的值。當(dāng)?shù)褂?jì)時(shí)為零時(shí)，自動觸發(fā)刷新操作。

mounted() {
  // 初始化時(shí)間范圍為當(dāng)前時(shí)間和15分鐘前的時(shí)間
  const now = new Date()
  const fifteenMinutesAgo = new Date(now.getTime() - 15 * 60 * 1000) // 當(dāng)前時(shí)間 - 15分鐘

  // 設(shè)置時(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}-$wppm3vysvbp ${h

}:${min}:${sec}`
  }

  this.timeRange = [formatDate(fifteenMinutesAgo), formatDate(now)]

  // 啟動倒計(jì)時(shí)定時(shí)器
  this.startCountdown()

  // 初始化圖表
  this.initCharts()
},

beforeDestroy() {
  // 清除定時(shí)器
  clearInterval(this.refreshInterval)
},

methods: {
  startCountdown() {
    this.refreshInterval = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown -= 1
      } else {
        this.handleRefreshClick()
        this.countdown = 30  // 重置倒計(jì)時(shí)
      }
    }, 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 實(shí)現(xiàn)一個(gè)動態(tài)更新的儀表盤，展示了如何處理定時(shí)更新、倒計(jì)時(shí)和實(shí)時(shí)數(shù)據(jù)展示等功能。在實(shí)際開發(fā)中，這樣的功能通常應(yīng)用于監(jiān)控系統(tǒng)、財(cái)務(wù)報(bào)表展示、數(shù)據(jù)分析儀表盤等場景。通過結(jié)合 Vue 和 ECharts，我們可以輕松實(shí)現(xiàn)動態(tài)交互與數(shù)據(jù)可視化的功能，提高系統(tǒng)的實(shí)時(shí)性和用戶體驗(yàn)。

在本教程中，我們講解了如何：

使用 Vue 構(gòu)建前端組件。
使用 ECharts 展示圖表數(shù)據(jù)。
實(shí)現(xiàn)倒計(jì)時(shí)功能和定時(shí)刷新機(jī)制。

這些技能對于開發(fā)實(shí)時(shí)監(jiān)控系統(tǒng)和數(shù)據(jù)可視化應(yīng)用非常有用，希望通過本篇文章能夠幫助大家深入理解 Vue 和 ECharts 的集成應(yīng)用。

以上就是基于Vue和ECharts實(shí)現(xiàn)定時(shí)更新與倒計(jì)時(shí)功能的實(shí)戰(zhàn)分享的詳細(xì)內(nèi)容，更多關(guān)于Vue ECharts定時(shí)更新與倒計(jì)時(shí)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: