基于Vue以及websocket可开启关闭的实时渲染echarts曲线图

这是本人的第一篇博客，如果有什么疑问或者建议可以在评论区留言喔，希望能在大家遇到相同的需求的时候帮助到大家！

我在项目里拿到了这么一个需求

1. 分析需求：进入页面时绘制曲线图，并且实时的渲染，按开启暂停的按钮可以使其停止渲染/开始渲染。

2. 整理已有资源： 一个全局推送的websocket，包含消息通知和不同设备的实时数据信息。有操作文档非常完善的Echarts组件库

3. 构建实现思路：

   （1）在全局的websocket加上监听，为了防止多个组件的监听事件发生覆盖，这里使用addEventListener监听信息接收时间。

   （2）查找Echart配置项文档，完成Echarts的样式配置，梳理动态数据渲染的基本逻辑。

   （3）在监听事件内控制开启关闭参数，控制是否渲染。

核心代码

    // 获取websocket
    activeEcharts() {
     // 初始化一个Echarts对象
      var myChart = echarts.init(document.getElementById(`${this.inItem.id}`))
      
      // 设置Echarts的样式配置,非重点，省略
      var option = {...}
      
      const that = this

      // 给全局的Websocket对象绑上监听事件
      that.global.ws.addEventListener('message', function(res) {
        // 获取每一次websocket传进来的数据
        const result = JSON.parse(res.data) 
        // 进行数据筛选 先屏蔽无数据情况
        if (result) {
          // 再筛选出本模块所需参数
          if (result.type == 3) {  
            // 最后判断开关状态
            if (isRender) {
              // 把数值数据推入Y轴
              option.series[0].data.push(result.data[that.keyss])
              // 把时间数据处理后推入X轴
              option.xAxis.data.push(moment.unix(result.data['time'] / 1000).format('YYYY-MM-DD HH:mm:ss'))
            }
          }
        }
        myChart.setOption(option) // 加载配置项
      })
    },