echartwebstockvue实现实时心率图

echartwebstockvue实现实时心率图echartwebstockvue实现实时心率图最近接到要求做实时心率图，所以收藏了网上的一些资料，基于webstock和echart实现了实时心率图，具体动态效果如下：图片效果如下：好了，废话不多说，下面开始说说如何实现这个功能吧！1、下载echart下载echart，在vue-cli中下载echart使用npm命令行：npminstallecharts--save--save会自动将模块和版本号添加到package.json的dependencies部分，然后添加需要的从views页面的'echarts'导入echarts，或者在mian.js中导入。由于楼主这里封装了echart组件，所以在组件中引入了echart。如图：2.封装webstock因为是实时心率图，所以这时候就需要使用webstock与后台保持实时数据双通讯连接。图请参考echart官网。经过第一步和第二部分，基本的准备工作已经准备好了。下一步是绘制心率图。首先引入我们封装的echart组件，然后传入相应的options参数实现静态心率图：options参数如下：`因为需要模拟心率图，所以x轴其实有一个预先值。使用循环语句，使折线图移动时，看起来更像心率图。在创建时调用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.countthis.heartOptions。dataZoom[0].startValue=0+200*this.countthis.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轴随value内容的动态分布#6.联系我：完整项目代码邮箱1015095073@qq.com