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。如图： 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