2022，不知不觉成了过去式，这一年有收获，有成长，也有失败和无奈，但作为一名专业的前端攻城狮，还是要一步一步的向’’钱’看，心怀‘薪‘望，这样才能‘秃‘破自己的瓶颈。
2022 年让我印象深刻的还是用echart 和webstock 做实时的心电图的实战经历，因为在此之前没有接触过医疗的前端，所以在做这块的前端，有些不知所措，好在，本人的主观能动性比较强（擅长查资料，翻墙）。
其实做项目需求也好，做别的事情也好，要学会拆分，把需求(事情)拆分成若干个小的，于是乎，根据上面的需求，我基于vue：
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 来和后端保持实时的数据双通讯连接，同时把webStock 也封装成了工具。
3.开始画心率图，请参考echart 官网
在第一步和第二部结束以后，基本的准备工作已经准备我完毕，接下来就是画心率图，
首先引入我们封装的echart 组件，在传入对应的options 参数，实现静态的心率图：
options 参数如下：
`
因为需要模仿心率图，所以x 轴事先其实已经有值了，有值但已经默认在echart 上隐藏了，使用循环语句给x轴赋值，这样当折线图动起来会更像心率图。在created 中调用initTime 方法。
4.连接webstock 实现心率动起来
调用事先封装好的webstock方法，如图
url 中是连接后端的地址。received 中的逻辑处理请根据项目的实际需要进行修改。
同时为了实现当超过一定的数量滚动的效果，采用了echart 的 dataZoom，本项目中是一个页面200条数据，当超过以后，进行向左滚动，实现心率图的滚动效果 ，代码如下：
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++
}
注释：endValue 和startValue 就是心率图数据窗口范围的起始数值和数据窗口范围的结束数值。
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轴随数值内容动态分布
7.效果
8.总结
这个需求，难度在于，如何让接入的数据看上去更像心电图，有些跳动显得很生硬，所以这是我们前端需要去解决的，还有就是数据处理的问题，在webstock 中接受的数据要进行比较，找到对应该设备的数据，然后再进行处理。
现在我站在已经完成的角度上来讲，一切都显的轻描淡写，但在当时，当敲下第一行代码的时候没有思路;找资料，浏览器窗口开50六十个的时候；问别人有没有接触过这个的时候，无人问津的时候，不知道当时的心情是怎么样的。
2022 已经过去了，未来的日子，作为程序猿，需求和bug 有很多，借用莫泊桑的一句话：生活不可能想你想象的那么好，但也不可能像你想象的那么糟。我觉得人的脆弱和坚强都超乎自己的想象。有时，我可能脆弱得一句话就泪流满面；有时，也发现自己咬着牙走了很长的路。所以大家都咬牙坚持下去吧！！！