2022 has become a past tense unknowingly. This year has gained, grown, failed and helpless, but as a professional front-end siege lion, you still have to look at "money" step by step and keep "salary in mind" 'Hope, so that I can 'bald' break my own bottleneck.
What impressed me most in 2022 was the practical experience of using echart and webstock to do real-time ECG. Because I hadn’t touched the front-end of medical treatment before, I was a little at a loss when doing this front-end. Fortunately, my subjective Strong initiative (good at checking information, overcoming walls).
In fact, whether you are doing project requirements or doing other things, you must learn to split and split the requirements (things) into several small ones. So, according to the above requirements, I am based on vue:
1. Download echart
下载echart ,vue-cli 中下载echart 使用npm 命令行：npm install echarts --save
The function of –save automatically adds the module and version number to the dependencies part of package.json, and then import echarts from 'echarts' in the views page that needs to be used, or import it in mian.js.
Since I encapsulated the echart component here, I introduced echart into the component. As shown in the picture:
2. Package webstock
Since it is a real-time heart rate graph, it is necessary to use webstock to maintain a real-time data dual communication connection with the backend at this time, and at the same time, webStock is also packaged as a tool.
3. Start drawing the heart rate graph, please refer to echart official website
After the first step and the second part are over, the basic preparatory work has been prepared for me. The next step is to draw the heart rate chart. First,
introduce the echart component we encapsulated, and then pass in the corresponding options parameter to realize the static heart rate chart:
options The parameters are as follows:
`
Because it needs to imitate the heart rate chart, the x-axis actually has a value in advance. It has a value but has been hidden on the echart by default. Use a loop statement to assign a value to the x-axis, so that when the line chart moves, it will be more like a heart rate chart. Call the initTime method in created.
4. Connect webstock to realize heart rate movement
Call the pre-encapsulated webstock method, as shown
in the figure url is the address to connect to the backend. Please modify the logic processing in received according to the actual needs of the project.
At the same time, in order to achieve the effect of scrolling when a certain amount is exceeded, echart's dataZoom is used. In this project, there are 200 pieces of data on a page. When the number exceeds, scroll to the left to achieve the scrolling effect of the heart rate graph. The code is as follows:
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. Realize tooptips automatic follow, the code is as follows
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. Finally, realize the dynamic distribution of the y-axis along with the value content
7. Effect
8. Summary
The difficulty of this requirement lies in how to make the accessed data look more like an electrocardiogram, and some beats are very blunt, so this is what our front end needs to solve, and there is also the problem of data processing. The data received in webstock must be processed Compare, find the data corresponding to the device, and then process it.
Now, from the perspective of what has been completed, everything is an understatement, but at that time, when I typed the first line of code, I had no idea; when I was looking for information, when the browser window was opened 50 or 60; I don't know how I felt when I didn't know about it, when no one cares about it.
2022 has passed, and in the days to come, as a programmer, there are many needs and bugs. To borrow a sentence from Maupassant: Life cannot be as good as you imagine, but it cannot be as bad as you imagine. I think people's fragility and strength are beyond my imagination. Sometimes, I may be so fragile that I burst into tears with a single sentence; sometimes, I find myself gritting my teeth and walking a long way. So everyone grit your teeth and stick to it! ! !