鸿蒙APP实战案例分析——MpChart运动健康场景实践案例

📌往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

📃 鸿蒙（HarmonyOS）北向开发知识点记录~

📃 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

📃 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

📃 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

📃 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

📃 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

📃 记录一场鸿蒙开发岗位面试经历~

📃 持续更新中……

---

介绍

MpChart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，MpChart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。
本示例介绍了 MpChart 图表组件的使用方法。该组件多用于可视化等场景。

效果图预览

使用说明：

• 滑动屏幕，查看各图表组件。
• 点击曲线图内容，展示图表信息。

实现思路

1. 健身记录部分：使用柱状图描述近七日每日的热量消耗情况，主要实现点在于柱状图的创建过程。

• 初始化图表配置构建类

  // 初始化图表配置构建类
  this.model = new BarChartModel();
  // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
  this.model.setMaxVisibleValueCount(VISIBLE_VALUE_COUNT);
  // 是否绘制图表的背景色，绘制范围为图表柱状图的绘制范围，不包含轴线之外的部分
  this.model.setDrawGridBackground(true);
  // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格
  this.model.setGridBackgroundColor(GRID_BG_COLOR);
  // 设置不绘制柱状图的柱体阴影背景
  this.model.setDrawBarShadow(false);
  // 设置柱状图的数值在柱体上方
  this.model.setDrawValueAboveBar(true);
  // 设置柱状图的高亮范围是否为整个柱体，只在堆叠柱状图中有区别
  this.model.setHighlightFullBarEnabled(true);

• 限制线的设置

  // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
  this.limitLine = new LimitLine(STEP_TARGET_NUMBER, STEP_TARGET);
  // 设置限制线的宽度
  this.limitLine.setLineWidth