关于前端:echart-webstock-vue实现实时心率图

echart webstock vue 实现实时心率图

echart webstock vue 实现实时心率图

最近收到一个需要，须要做一个实时的心率图，于是就上网收集了一些材料，基于 webstock 和 echart 实现了实时的心率图，具体动态效果如下：

图片成果如下：

好了，废话不多少，那咱们就开始如何实现该性能吧！

1. 下载 echart

 下载 echart ,vue-cli 中下载 echart 应用 npm 命令行：npm install echarts --save

–save 的作用 主动把模块和版本号增加到 package.json 的 dependencies 局部，而后在须要用到的 views 页面中 import echarts from ‘echarts’，或者在 mian.js 引入。

     楼主这里因为封装了 echart 组件，所以就在组件中引入了 echart。如图：![在这里插入图片形容](https://img-blog.csdnimg.cn/09980d4da17c4eef966b7f52a9bf9559.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6LWw5LqG77yM6LWw5LqG,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

2. 封装 webstock

因为是实时心率图，所以这个时候就须要应用 webstock 来和后端放弃实时的数据双通信连贯，具体也不多讲了，看图：

3. 开始画心率图，请参考 echart 官网

在第一步和第二部完结当前，根本的筹备工作曾经筹备我结束，接下来就是画心率图，
首先引入咱们封装的 echart 组件，在传入对应的 options 参数，实现动态的心率图：
options 参数如下：
`

  因为须要模拟心率图，所以 x 轴当时其实曾经有值了，应用循环语句，这样当折线图动起来会更像心率图。在 created 中调用 initTime 办法。

4. 连贯 webstock 实现心率动起来

调用当时封装好的 webstock 办法，如图

url 中是连贯后端的地址。received 中的逻辑解决请依据我的项目的理论须要进行批改。

同时为了实现当超过肯定的数量滚动的成果，采纳了 echart 的 dataZoom，本我的项目中是一个页面 200 条数据，当超过当前，进行向左滚动，实现心率图的滚动成果，代码如下：
data(){

  return {
   numCount: 0,
    count: 1,
  }

}

 if (this.numCount > 200 * this.count + 1) {this.heartOptions.dataZoom[0].endValue = 200 + 200 * this.count
              this.heartOptions.dataZoom[0].startValue = 0 + 200 * this.count
              this.count++
            }

# 5. 实现 tooptips 主动追随, 代码如下

this.autoTime = setInterval(() => {
    // 主动显示轮播
    if (this.$refs.heartCharts) {
      this.$refs.heartCharts.dispatchAction({
        type: 'showTip', // 依据 tooltip 的配置项显示提示框。seriesIndex: 0,
        dataIndex: this.heartOptions.series.data.length - 1
      })
    }
  }, 100)

# 6. 最初实现 y 轴随数值内容动静散布

# 6. 分割我：

 如需残缺我的项目代码 邮箱 1015095073@qq.com