数据可视化实践：黑马健康饮食统计页_每天摄入热量与与与运动消耗的可视化-CSDN博客

本文链接：https://blog.csdn.net/ayx1234567/article/details/139974032

内容概览

数据可视化是健康管理应用中不可或缺的一环，它能够直观展示用户的饮食和运动数据，帮助用户理解自身健康状况。“黑马健康”的饮食统计页通过图表展现每日热量摄入、营养素分布等关键指标，本文将深入解析如何利用HarmonyOS的图形组件和数据处理技术实现这一功能。

实现亮点

日期选择器：允许用户选择特定日期查看饮食统计。
热量统计图：柱状图展示日热量摄入与消耗对比。
营养素分布图：饼图直观呈现蛋白质、碳水化合物、脂肪比例。

技术要点代码

// caloriestats.ets
import { RecordVO } from '../model/recordvo.ets';
import { RecordService } from '../service/recordservice.ets';
import { Chart } from '@ohos.chart';

@Entry
@Component
struct CalorieStats {
    @State selectedDate: string = DateUtil.currentDateString();
    @State statsData: any[] = []; // 存储统计图表所需数据
    
    async build() {
        Column() {
            DatePicker(onSelect: (date) => this.selectedDate = date) // 日期选择器
            Chart(type: 'bar', data: await this.fetchChartData()) // 热量统计柱状图