vue3+echarts实现任务管理器CPU性能图（window版）

前言

公司主要做的是实时数据库类的项目，用户下载软件后想要知道软件占的内存、磁盘等性能信息。最近开发web版数据库工具，也需要把这个原本在桌面端的功能移植过来，因此写这篇文章来记录一下这个功能，主要是思路这一块，大家有遇到类似的需求可以参考下，如果对你有帮助，那就太好不过了。

思路

首先分析window版的性能图，从60秒到0的数据是倒叙分布的，因此关键点在于让展示的数据从后往前添加，且只能保留60个。所以我的办法是展示的数据（chartData ）可以放60个空字符串，在定时器中，使用push方法添加数据，超过60后，删除掉第一个数据。x轴（xAxisData）的话同理放60个空字符串，然后第一个替换成60秒，最后一个替换成0，来完成样式，下面就是具体的实现了，不说太多，直接上代码，复制到你的项目中直接使用

代码

js 复制代码

<template>
  <div class="cpuChart-wrapper">
    <div id="cpuChart" style="width: 440px; height: 400px;"></div>
  </div>
</template>

<script setup>
import { onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';

const createChart = () => {

  let myChart = echarts.init(document.getElementById('cpuChart'));

  // 61是为了让数据贴合最右侧网格线，对逻辑没影响
  const chartData = Array(61).fill('')

  const xAxisData = Array(60).fill('')
  // splice(60, 0, '0')作用：不这样写，最右侧会少一列分割线，不影响逻辑
  xAxisData.splice(0, 1, '60秒')
  xAxisData.splice(60, 0, '0')

  const option = {
    // 很关键，默认是true会让图表数据闪烁
    animation: false,
    title: [
      {
        text: "CPU",
        left: "40%"
      },
      {
        text: "100%",
        right: "4%",
        top: "7%",
        textStyle: {
          color: "#777",
          fontSize: 12,
          fontWeight: 'normal',
        },
      }
    ],
    xAxis: {
      boundaryGap: false,
      data: xAxisData,
      type:'category',
      splitLine:{
        show: true, // 网格显示
        lineStyle: {// 网格样式
          color:['#ccc'], // 网格颜色
          width:1, // 网格宽度
          type:'solid' // 网格实线
        }
      },
      // 隐藏坐标轴的分割线
      axisTick: {
        show: false
      }
    },
    yAxis:{
      name: '%利用率',
      type: 'value',
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        type: "line",
        data: chartData,
        areaStyle: {
          color: "#d5e5ff"
        },
        lineStyle: {
          width: 0
        },
        showSymbol: false,
      }
    ]
  }

  // 绘制图表
  myChart.setOption(option);

  setInterval(() => {
    // Math.random() * 100是随机数，实际应用场景中，数据从接口获取
    chartData.push(Math.random() * 100)
    if (chartData.length >= 60) {
      chartData.shift()
    }
    myChart.setOption({
      series: [
        {
          data: chartData
        }
      ]
    })
  },1000)
}

onMounted(() => {
  nextTick(() => {
    createChart()
  })
})
</script>

<style lang='scss' scoped>
</style>

效果

工具推荐

最后这个图是通过Gifski（Mac）做的，这个工具可以把录屏转为GIF图，刚发现的神器，有需要的可以下载来用用，操作界面很简洁。免费！！！