Practical tutorial on implementing timing updates and countdown functions based on Vue and ECharts
Background and requirements
Suppose you are developing a data monitoring system, the system needs to display the data in real time and automatically refresh the data within a specific time interval. To improve the user experience, you also want to add a countdown function to the page, which will automatically trigger the refresh operation after the countdown is over. Common application scenarios are:
- Monitor the performance metrics of a system in real time (such as CPU usage, memory consumption, request latency, etc.).
- Update data display regularly to ensure the timeliness of data display.
- Provides countdown function to enhance page interactivity and user perception.
This article uses a complete case to show how to implement timed data updates and countdown functions in Vue projects, and combines ECharts to display real-time data.
Project Overview
The functions we want to implement include the following parts:
- Time selector: Allows the user to select a time range.
- Confirm and refresh buttons: When the user clicks the confirm button, a data request is triggered to refresh the displayed data.
- Countdown display: Display countdown on the page, and the data will be automatically refreshed after the countdown is over.
- Four large monitoring screens: Each large screen displays an ECharts chart to display data in real time.
Next, we will analyze how to implement these functions step by step.
Implementation steps
1. Create Vue Projects and Install ECharts
First, we need to install ECharts in the Vue project. ECharts is a powerful data visualization library that helps us create various charts easily. ECharts can be installed via the following command:
npm install echarts --save
Then, we introduce ECharts in the Vue component.
2. Build component structure
First, we design a basic Vue component structure. This structure includes:
- Time selector: The user can select the time range.
- Confirm and refresh buttons: used to confirm operations and refresh data respectively.
- Countdown Display: Displays the countdown and automatically triggers refresh at the end.
- Four large monitoring screens: Use ECharts to display data.
<template>
<div class="dashboard">
<!-- Time selector -->
<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="to"
start-placeholder="Start Time"
end-placeholder="End Time"
class="date-picker"
></el-date-picker>
<!-- Confirm button -->
<el-button type="primary" @click="handleConfirmClick" :disabled="isRequesting" class="confirm-button">
confirm
</el-button>
<el-button type="primary" @click="handleRefreshClick" :disabled="isRequesting" class="confirm-button">
refresh
</el-button>
<!-- Countdown display -->
<div class="countdown">
<span>Countdown: {{ countdown }}</span>
</div>
<!-- Four large-screen monitoring areas -->
<div class="charts-container">
<!-- The first chart -->
<div ref="chartContainer1" class="chart-item"></div>
<!-- The second chart -->
<div ref="chartContainer2" class="chart-item"></div>
<!-- The third chart -->
<div ref="chartContainer3" class="chart-item"></div>
<!-- The fourth chart -->
<div ref="chartContainer4" class="chart-item"></div>
</div>
</div>
</template>
3. Define data and countdown functions
We're atdataThe time selection range, countdown initial value, and chart data are defined. It is particularly important to note that in the implementation of the countdown function, we will use a timer to control the countdown.
data() {
return {
chart1: null,
chart2: null,
chart3: null,
chart4: null,
timeRange: [], // Time interval bound by time selector countdown: 30, // The countdown is initially 30 seconds 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, // Prevent multiple clicks of the confirm button refreshInterval: null // Timer reference }
}
4. Timer and countdown logic
existmountedIn the hook, we start a timer to reduce the countdown value per second. When the countdown is zero, the refresh operation is automatically triggered.
mounted() {
// Initialization time range is the current time and the time 15 minutes ago const now = new Date()
const fifteenMinutesAgo = new Date(() - 15 * 60 * 1000) // Current time - 15 minutes
// Set the time format to yyyy-MM-dd HH:mm:ss const formatDate = (date) => {
const y = ()
const m = String(() + 1).padStart(2, '0')
const d = String(()).padStart(2, '0')
const h = String(()).padStart(2, '0')
const min = String(()).padStart(2, '0')
const sec = String(()).padStart(2, '0')
return `${y}-${m}-${d} ${h
}:${min}:${sec}`
}
= [formatDate(fifteenMinutesAgo), formatDate(now)]
// Start the countdown timer ()
// Initialize the chart ()
},
beforeDestroy() {
// Clear the timer clearInterval()
},
methods: {
startCountdown() {
= setInterval(() => {
if ( > 0) {
-= 1
} else {
()
= 30 // Reset countdown }
}, 1000)
},
// Refresh data handleRefreshClick() {
if () return
= true
()
setTimeout(() => {
= false
alert('Refreshed successfully')
}, 1000)
},
// Initialize the chart data 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' }
}
]
}
// Set chart data this.(commonOption0)
this.(commonOption0)
this.(commonOption0)
this.(commonOption0)
}
}
Summarize
This article describes how to implement a dynamically updated dashboard through Vue and ECharts, showing how to handle functions such as timing updates, countdowns, and real-time data display. In actual development, such functions are usually used in monitoring systems, financial statement display, data analysis dashboards and other scenarios. By combining Vue and ECharts, we can easily implement dynamic interaction and data visualization functions, improving the real-time and user experience of the system.
In this tutorial, we explain how:
- Build front-end components using Vue.
- Use ECharts to display chart data.
- Implement countdown function and timing refresh mechanism.
These skills are very useful for developing real-time monitoring systems and data visualization applications. I hope this article will help you understand the integrated applications of Vue and ECharts in depth.
The above is the detailed content of the actual sharing of the timed update and countdown functions based on Vue and ECharts. For more information about Vue ECharts timed update and countdown, please pay attention to my other related articles!