使用 ECharts 实现请求耗时与 P 值监控的大屏展示

用户8589624

发布于 2025-11-15 13:25:11

1870

文章被收录于专栏：nginxnginx

使用 ECharts 实现请求耗时与 P 值监控的大屏展示

在现代系统的监控中，图表是一个非常重要的展示方式，能够帮助开发人员直观地查看服务的性能和健康状态。本文将结合实际需求，介绍如何使用 ECharts 实现请求耗时与 P 值（如 P99、P95、P90、P75 等）的监控图表，并且将它们嵌入到大屏展示中。为了帮助大家更好地理解，我们还会讲解如何在 Vue 项目中进行实现。

一、背景与需求

在高性能系统中，响应时间是衡量系统性能的重要指标，而 P 值则用于衡量不同百分比的请求响应时间。在实际生产环境中，开发人员通常关注：

P99：请求响应时间的 99% 较低值，常用于判断系统的极端性能。
P95：请求响应时间的 95% 较低值，常用于衡量大部分请求的延迟。
P90、P75：分别代表 90% 和 75% 请求的响应时间。

对于这些数据的监控，我们可以通过 ECharts 展示这些 P 值随时间的变化，帮助我们评估系统在不同时间点的性能表现。本文的目标是实现一个能够显示多个 P 值的请求耗时监控仪表盘，并实现图表刷新与数据更新功能。

二、环境准备

1. 技术栈

我们在这个项目中使用了以下技术栈：

Vue.js：前端框架，用于构建动态页面。
ECharts：一个强大的前端图表库，用于展示数据图表。
Element UI：UI 组件库，用于实现日历选择器、按钮等。
API 调用：通过模拟数据展示，实际开发中可以替换为后端 API 请求。

2. 项目结构

我们的项目结构非常简单，包含一个 Dashboard.vue 组件，该组件中有四个 ECharts 图表用于展示请求耗时与 P 值的监控数据。具体的代码实现如下。

三、实现过程

1. 创建 Vue 组件

在 Dashboard.vue 文件中，我们首先需要创建一个容器来存放四个图表，并添加相关的 UI 控件，比如时间选择器和按钮。

<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="结束时间"
      class="date-picker"
    ></el-date-picker>

    <!-- 确认按钮 -->
    <el-button type="primary" @click="handleConfirmClick" :disabled="isRequesting" class="confirm-button">
      确认
    </el-button>
    <el-button type="primary" @click="handleRefreshClick" :disabled="isRequesting" class="confirm-button">
      刷新
    </el-button>

    <!-- 四个监控大屏区域 -->
    <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>

在这个模板中，我们使用了 Element UI 提供的 el-date-picker 来选择时间区间，并使用 el-button 来实现确认和刷新按钮。所有四个图表容器都通过 ref 获取引用，以便后续在 Vue 的 mounted 钩子中初始化 ECharts 图表。

2. 初始化图表

在组件的 mounted 钩子中，我们需要初始化 ECharts 实例，并为每个图表设置配置项。我们为四个图表设置了相同的配置，只是它们显示在不同的容器中。

mounted() {
  // 初始化时间范围为当前时间和15分钟前的时间
  const now = new Date()
  const fifteenMinutesAgo = new Date(now.getTime() - 15 * 60 * 1000) // 当前时间 - 15分钟

  // 设置时间格式化为 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}-${d} ${h}:${min}:${sec}`
  }

  this.timeRange = [formatDate(fifteenMinutesAgo), formatDate(now)] // 设置默认时间为15分钟区间

  this.initCharts()
  this.handleConfirmClick()
}

在 mounted 钩子中，我们计算出当前时间和 15 分钟前的时间，并将其设置为时间选择器的默认时间区间。接着，调用 initCharts() 方法初始化图表。

3. 配置图表选项

我们将图表的通用配置提取到一个 commonOption 对象中，这样每个图表就可以共享相同的配置。为了保证每个图表的数据不同，我们将 P99、P97、P95 等数据封装在 pValues 对象中，使用不同的颜色和样式来区分不同的 P 值。

setChartOption() {
  const commonOption = {
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        let tooltip = `${params[0].axisValue}<br>`
        params.forEach(item => {
          tooltip += `${item.seriesName}: ${item.data}<br>`
        })
        return tooltip
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      name: '时间',
      data: this.xAxisData // X轴数据保持不变
    },
    yAxis: {
      type: 'value',
      name: '请求耗时 (ms)' // Y轴名称
    },
    series: [
      {
        name: 'P99',
        type: 'line',
        data: this.pValues.P99,
        smooth: true,
        lineStyle: { color: '#F44336' }
      },
      {
        name: 'P97',
        type: 'line',
        data: this.pValues.P97,
        smooth: true,
        lineStyle: { color: '#9C27B0' }
      },
      {
        name: 'P95',
        type: 'line',
        data: this.pValues.P95,
        smooth: true,
        lineStyle: { color: '#2196F3' }
      },
      {
        name: 'P90',
        type: 'line',
        data: this.pValues.P90,
        smooth: true,
        lineStyle: { color: '#FF5722' }
      },
      {
        name: 'P75',
        type: 'line',
        data: this.pValues.P75,
        smooth: true,
        lineStyle: { color: '#FF9800' }
      }
    ]
  }

  // 配置图表1
  const option1 = {
    ...commonOption,
    title: { text: '请求耗时与P值监控' }
  }
  this.chart1.setOption(option1)

  // 配置图表2
  const option2 = {
    ...commonOption,
    title: { text: '请求耗时与P值监控' }
  }
  this.chart2.setOption(option2)

  // 配置图表3
  const option3 = {
    ...commonOption,
    title: { text: '请求耗时与P值监控' }
  }
  this.chart3.setOption(option3)

  // 配置图表4
  const option4 = {
    ...commonOption,
    title: { text: '请求耗时与P值监控' }
  }
  this.chart4.setOption(option4)
}

4. 处理按钮点击事件

为了模拟用户的交互，我们为确认按钮和刷新按钮添加了点击事件。每当点击确认按钮时，会模拟一次数据请求，刷新图表。以下是 handleConfirmClick 和 handleRefreshClick 方法的实现。

handleConfirmClick() {
  if (this.isRequesting) return
  this.isRequesting = true
  setTimeout(() => {
    this.isRequesting = false
  }, 2000)  // 模拟请求时间
}

handleRefreshClick() {
  if (this.isRequesting) return
 

 this.isRequesting = true
  setTimeout(() => {
    this.isRequesting = false
  }, 2000)  // 模拟请求时间
}

四、总结与优化

统一配置：我们通过提取图表的通用配置，减少了重复代码，使得图表的配置更加清晰和易于维护。
数据更新：通过 handleConfirmClick 和 handleRefreshClick 方法，模拟了图表数据的请求和刷新，实际应用中可以替换为真实的 API 请求。
灵活布局：使用 grid 布局来实现图表的排布，使得整个大屏展示更加灵活，适合各种显示需求。

通过这些步骤，我们成功实现了一个基于 ECharts 的请求耗时与 P 值监控的大屏展示，能够帮助开发人员实时监控系统的性能，及时发现性能瓶颈和异常。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-11-12，如有侵权请联系 cloudcommunity@tencent.com 删除

配置