如何在 Vue 中使用 ECharts 展示 P值监控和时间与总请求数关系

npm install echarts --save

<template>
  <div>
    <!-- 时间选择器 -->
    <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>

    <!-- ECharts 图表：P值监控 -->
    <div ref="chartContainer" class="chart-container"></div>

    <!-- ECharts 图表：时间与总请求数 -->
    <div ref="timeTotalRequestsChartContainer" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as dataAndReportApi from '@/api/ad-api/dataAndReport'
import db from '@/utils/localstorage'

export default {
  data() {
    return {
      chart: null,
      timeTotalRequestsChart: null, // 新增的图表实例
      agentId: 0,
      timeRange: [],  // 时间选择器绑定的时间区间
      xAxisData: [],  // 时间数据
      yAxisData: [],  // 总请求数数据
      pValues: {
        P99: [],
        P97: [],
        P95: [],
        P90: [],
        P75: []
      },
      isRequesting: false // 防止多次点击确认按钮
    }
  },
  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.initChart()
    this.initTimeTotalRequestsChart()
    // 页面加载完成后立即触发一次确认按钮的点击事件
    this.handleConfirmClick()
  },
  methods: {
    // 初始化P值监控图表
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      this.setChartOption()
    },

    // 初始化时间与总请求数图表
    initTimeTotalRequestsChart() {
      this.timeTotalRequestsChart = echarts.init(this.$refs.timeTotalRequestsChartContainer)
    },

    // 设置P值监控图表的选项
    setChartOption() {
      const option = {
        title: {
          text: '请求耗时与P值监控' // 图表标题
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            let tooltip = `${params[0].axisValue}<br>`
            params.forEach(item => {
              tooltip += `${item.seriesName}: ${item.data}<br>`
            })
            return tooltip
          }
        },
        legend: {
          data: ['P99', 'P97', 'P95', 'P90', 'P75']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          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' }
          }
        ]
      }

      this.chart.setOption(option) // 更新图表
    },

    // 设置时间与总请求数图表的选项
    setTimeTotalRequestsChartOption() {
      const option = {
        title: {
          text: '时间与总请求数关系' // 新图表的标题
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return `${params[0].axisValue}<br>总请求数: ${params[0].data}`
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData // X轴数据，时间
        },
        yAxis: {
          type: 'value',
          name: '总请求数' // Y轴名称
        },
        series: [
          {
            name: '总请求数',
            type: 'line',
            data: this.yAxisData, // Y轴数据，总请求数
            smooth: true,
            lineStyle: { color: '#4CAF50' }
          }
        ]
      }
      this.timeTotalRequestsChart.setOption(option) // 更新图表
    },

    // 处理点击确认按钮的逻辑
    async handleConfirmClick() {
      if (this.isRequesting) return // 防止多次点击

      this.isRequesting = true // 标记为正在请求
      try {
        const timeRangeObject = {
          startTime: this.timeRange[0],  // 数组中的第一个时间是开始时间
          endTime: this.timeRange[1]    

 // 数组中的第二个时间是结束时间
        }
        // 调用 API 获取相关数据并更新表格
        const response = await dataAndReportApi.getReportData(timeRangeObject)

        // 假设响应数据是我们需要的数据
        const data = response.data // 请根据实际接口响应调整
        this.xAxisData = data.map(item => item.time) // 时间数据
        this.yAxisData = data.map(item => item.totalRequests) // 总请求数数据
        this.pValues = {
          P99: data.map(item => item.P99),
          P97: data.map(item => item.P97),
          P95: data.map(item => item.P95),
          P90: data.map(item => item.P90),
          P75: data.map(item => item.P75)
        }

        this.setChartOption() // 更新P值图表
        this.setTimeTotalRequestsChartOption() // 更新时间与总请求数图表
      } catch (error) {
        console.error('获取数据失败:', error)
      } finally {
        this.isRequesting = false // 请求完成
      }
    }
  }
}
</script>

<style scoped>
.date-picker {
  margin-bottom: 20px;
}
.confirm-button {
  margin-bottom: 20px;
}
.chart-container {
  height: 400px;
  margin-top: 20px;
}
</style>