【本文正在参加 2023「盲盒」+码有奖征文活动】，活动链接 https://ost.51cto.com/posts/25284

简要介绍

本实践主要测试一下在低版本鸿蒙，仅支持FA模型JS语言的环境中，如何实现心电波形的绘制，动态刷新以及多个波形的绘制过程，仅讨论了上层实现过程，底层数据采集部分不涉及。

效果预览

功能分析

整个界面分为上下两部分，上部分显示时间和心率，通过定时器setInterval不断刷新。下部分显示波形图，这里模拟的是三个导联设备，所以画了三个波形图，每个波形图使用一个chart组件，共放置了三个chart组件。

<div class="chart-area">
    <chart class="chart-data" type="line" ref="firstchart" options="{{ lineOps }}" datasets="{{ lineData }}">
    </chart>
    <chart class="chart-data" type="line" ref="secondchart" options="{{ lineOps }}" datasets="{{ lineData }}">
    </chart>
    <chart class="chart-data" type="line" ref="thirdchart" options="{{ lineOps }}" datasets="{{ lineData }}">
    </chart>
</div>

chart组件几个比较常用的属性：
Type: 设置图表类型，这里我们需要设置为line，用于绘制曲线波形。
Options：图表参数设置，可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。
Datasets：数据集合，线形图必须设置数据集合。
更新数据使用append方法，设置新增的数据

that.$refs.firstchart.append({
    serial: 0,
    data: [that.firstArray[that.firstIndex++ % 100]]
})

在定时器里，我们每隔一段时间，就往图表chart的数据源里推送新的数据，数据就会随着时间X轴自动更新图表的Y轴的值，到图表末尾的时候自动返回到开头刷新。

实现代码

1. Index.hml，页面布局文件

<!-- xxx.hml -->
<div class="container">
    <div class="top-area">
        <text  class="time">{{ timeValue }}</text>
        <div class="heart-area">            
            <text class="heart">{{ heartBeatValue }}</text>
            <text style="font-size:15fp;">次/分</text>
        </div>
    </div>
    <div class="chart-area">
        <chart class="chart-data" type="line" ref="firstchart" options="{{ lineOps }}" datasets="{{ lineData }}">
        </chart>
        <chart class="chart-data" type="line" ref="secondchart" options="{{ lineOps }}" datasets="{{ lineData }}">
        </chart>
        <chart class="chart-data" type="line" ref="thirdchart" options="{{ lineOps }}" datasets="{{ lineData }}">
        </chart>
    </div>
</div>

2. Index.css，页面样式文件

/* xxx.css */
.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;

}

.top-area {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    color: white;
    background-color: black;
    font-size: 20fp;
    padding: 30px;
}

.chart-area {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: black;
}

.time {
    align-items: center;
    width: 100%;
    font-size: 25fp;
}

.heart-area {
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
    width: 100%;
    background-color: black;

}

.heart {
    text-align: right;
    font-size:40fp;
    margin-right: 10px;
    width: 140px;
}

.chart-region {
    height: 300px;
    width: 100%;
    background-color: black;
}
.chart-background {
    object-fit: fill;
}
.chart-data {
    width: 700px;
    height: 300px;
}
button {
    width: 100%;
    height: 100px;
    background-color: #F4F2F1;
    text-color: #0C81F3;
}

3. Index.js，页面逻辑文件

// xxx.js
export default {
    data: {
        dataArray: [45, 45, 45, 46, 46, 46, 46, 47, 47, 47, 47, 46, 46, 46, 46, 46, 46, 45, 45, 45, 44, 44, 45, 49, 73, 94, 97, 80, 51, 43, 42, 43, 43, 43, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 44, 45, 45, 45, 45, 46, 46, 47, 47, 48, 48, 49, 50, 51, 52, 53, 54, 55, 56, 56, 55, 54, 53, 52, 50, 48, 47, 45, 44, 44, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 45, 45, 45, 46, 46, 46, 46, 46, 46, 46, 47, 47, 47, 47, 47, 47],
        firstArray: [45, 45, 45, 46, 46, 46, 46, 47, 47, 47, 47, 46, 46, 46, 46, 46, 46, 45, 45, 45, 44, 44, 45, 49, 73, 94, 97, 80, 51, 43, 42, 43, 43, 43, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 44, 45, 45, 45, 45, 46, 46, 47, 47, 48, 48, 49, 50, 51, 52, 53, 54, 55, 56, 56, 55, 54, 53, 52, 50, 48, 47, 45, 44, 44, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 45, 45, 45, 46, 46, 46, 46, 46, 46, 46, 47, 47, 47, 47, 47, 47],
        secondArray: [45, 45, 45, 46, 46, 46, 46, 47, 47, 47, 47, 46, 46, 46, 46, 46, 46, 45, 45, 45, 44, 44, 45, 49, 73, 94, 97, 80, 51, 43, 42, 43, 43, 43, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 44, 45, 45, 45, 45, 46, 46, 47, 47, 48, 48, 49, 50, 51, 52, 53, 54, 55, 56, 56, 55, 54, 53, 52, 50, 48, 47, 45, 44, 44, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 45, 45, 45, 46, 46, 46, 46, 46, 46, 46, 47, 47, 47, 47, 47, 47],
        thirdArray: [45, 45, 45, 46, 46, 46, 46, 47, 47, 47, 47, 46, 46, 46, 46, 46, 46, 45, 45, 45, 44, 44, 45, 49, 73, 94, 97, 80, 51, 43, 42, 43, 43, 43, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 44, 45, 45, 45, 45, 46, 46, 47, 47, 48, 48, 49, 50, 51, 52, 53, 54, 55, 56, 56, 55, 54, 53, 52, 50, 48, 47, 45, 44, 44, 43, 43, 43, 43, 43, 43, 44, 44, 44, 44, 45, 45, 45, 46, 46, 46, 46, 46, 46, 46, 47, 47, 47, 47, 47, 47],

        dataIndex : 0,
        firstIndex : 0,
        secondIndex : 0,
        thirdIndex : 0,

        timeValue: "15:50:24",
        heartBeatValue: "75",


        chartInterval: '',
        timeInterval: '',

        heartData: [70, 78, 80, 89, 90, 85, 95, 99, 101, 106, 118],

        lineData: [
            {
                strokeColor: '#3fce3f',
                fillColor: '#b7f5b7',
                //                data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
                data: [50],
                gradient: false,
            }
        ],
        lineOps: {
            xAxis: {
                min: 0,
                max: 400,
                display: false,
            },
            yAxis: {
                min: 0,
                max: 200,
                display: false,
            },
            series: {
                lineStyle: {
                    width: "3px",
                    smooth: true,
                },
                headPoint: {
                    shape: "circle",
                    size: 6,
                    strokeWidth: 4,
                    fillColor: '#ffffff',
                    strokeColor: '#ffffff',
                    display: true,
                },
                loop: {
                    margin: 20,
                    gradient: true,
                }
            }
        },
    },


    onInit() {
        console.log("onInit was called.")
        this.setChartInterval();
        this.setTimeInterval();

    },

    onHide(){
        clearInterval(this.chartInterval);
        clearInterval(this.timeInterval);
    },

    setChartInterval() {
        var that = this
        this.chartInterval = setInterval(function() {
            that.$refs.firstchart.append({
                serial: 0,
                data: [that.firstArray[that.firstIndex++ % 100]]
            })
            that.$refs.secondchart.append({
                serial: 0,
                data: [that.secondArray[that.secondIndex++ % 100]]
            })
            that.$refs.thirdchart.append({
                serial: 0,
                data: [that.thirdArray[that.thirdIndex++ % 100]]
            })

        }, 50);
    },

    setTimeInterval() {
        var that = this
        this.timeInterval = setInterval(function() {
            // update time
            var myDate = new Date();
            var hh = myDate.getHours();
            if(hh < 10)
                hh = "0" + hh;
            var mm = myDate.getMinutes();
            if(mm < 10)
                mm = "0" + mm;
            var ss = myDate.getSeconds();
            if(ss < 10)
                ss = "0" + ss;
            that.timeValue = hh + ":" +mm + ":" + ss;

            //update heart beat
            that.heartBeatValue = that.heartData[Math.floor(Math.random() * that.heartData.length)];

        }, 1000);
    }
}

实践总结

在JS中通过chart组件绘制波形，发现是非常方便的，chart组件对数据的更新很友好，直接向数据源中不断push新数据就可以了，而且绘图时，控件会自动清空历史波形，视觉体验更好，开发方面也更方便。通过测试发现，波形数量增加时，也会出现卡顿现象，如果以后加上底层数据采集，可能对硬件性能也有一定要求。