更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz1.运行效果在页面上显示页面标题、心率图表、最大心率及其图标、最小心率及其图标、每分钟平均心率次数。如下图所示：2.实现思路在页面的生命周期事件函数onInit()中，随机生成指定范围内的若干个整数作为所有心率数据。根据随机生成的整数计算所有心率的最大值、最小值和平均值，通过动态绑定显示在页面上。使用组件图绘制心率曲线。通过动态绑定指定组件图表中属性options和datasets的值来设置图表的参数。3.详细代码解释打开文件index.hml。将组件文本中显示的页面标题更改为：心率曲线，并在其外层嵌套一个组件div来设置其样式。将组件div的属性class值设置为“title-container”。在页面标题下方添加一个组件div，用于显示心率图，并将属性类的值设置为“图表”。在心率图下方添加一个组件列表，用于显示心率的最大值、最小值和图标，并将属性类的值设置为“列表”。在组件列表中嵌套一个组件list-item来显示列表中的每一个列表项，并设置属性类的值为“list-item”。通过动态绑定指定属性值为"{{maxmin}}"，从而在index.js中迭代data中的maxmin。每个列表项由图片和文本组成，因此在组件列表项中添加组件图像和组件文本。在组件图片中，将属性class的值设置为“icon”，通过动态绑定将属性src的值设置为“/common/{{$item.iconName}}.png”。这样report2.js中data中的maxmin可以是一个字典数组，数组中的每个字典都包含一个key为iconName的元素。在组件文本中，将属性类的值设置为“maxmin”，通过动态绑定将显示的文本设置为“{{$item.mValue}}”。这样对于index.js中data中的数组maxmin，其中的每一个字典都包含一个key为mValue的元素。在列表下方添加一个组件div，用于显示一分钟内的心率平均值，并将属性类设置为值“average-container”。定义嵌套在组件div中的三个组件text，属性类的取值为："average"、"average-number"和"average"，显示的文本分别为：average、{{average}}、times/观点。以上解释请看下面代码：
