在websocket中实现echarts曲线图实现变化

最新推荐文章于 2025-02-05 17:36:21 发布

长安|故里

最新推荐文章于 2025-02-05 17:36:21 发布

阅读量571

点赞数

文章标签： websocket echarts 网络协议 vue.js elementui

本文链接：https://blog.csdn.net/Szs1208/article/details/131878972

版权

本文介绍如何在WebSocket网络协议下，结合Echarts库，实现实时数据显示在Vue.js应用中的曲线图表。通过建立WebSocket连接，接收后端每秒传输的数据，并将其存储到数组中。然后利用Echarts的方法更新图表，确保数据变化能在曲线图上动态展示。同时，借助ElementUI框架优化前端界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：要将后端每秒实时传输的数据放到曲线图内进行实时展示

办法：引入封装好的websocket js文件在页面内的通讯连接wsMessageHanler内将后端通过websocket实时传输的数据获取到然后将这些数据push到一个数组内在方法中将echarts配置完整写出来，确保曲线图能够出来，这时要在wsMessageHanler中调用echarts方法，页面中写入一个div标签用来放置曲线图。

页面中需要写入的div标签。重点在于ref="usedmemory"

<div ref="usedmemory3" style="width: 80rem; height: 25rem"></div>

在data中定义一个空数组，用处在于将从websocket中获取的数据push到这个数组中

data(){
  return{
    dataList: [],
    currentTime: "",
    timeList: [],
    // 通讯方法
    wsIsRun: false, // ws是否启动
    webSocket: null, // 定义ws对象
    ws: null, // ws请求链接
    wsTimer: null, // ws定时器
  }
}

在methods中写入websocket方法

async mounted(){
  this.wsIsRun = true;
  this.init();

  // 获取到实时时间
  this.updateTime();
  setInterval(this.updateTime, 1000); // 每秒更新一次时间
},

created(){
  var dataValues = sessionStorag

最低0.47元/天解锁文章