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