纯血鸿蒙APP第三方库——MpChart图表实现案例

原创

小帅聊鸿蒙

发布于 2025-01-20 14:06:40

1150

介绍

MpChart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示，Y轴是否显示，左Y轴位置，右Y轴位置，是否显示X轴，是否绘制背景色，是否设置MarkerView等。

效果图预览

使用说明

点击页面上控制项即可查看效果。需要注意的是选项”是否设置MarkerView“勾选后，点击柱状图中柱子会有弹窗效果。

实现思路

通过this.model = new BarChartModel()初始化图表配置构建类。

   // 图表数据初始化
   aboutToAppear() {
       // 初始化图表配置构建类
       this.model = new BarChartModel();
       ...
   }

配置图表指定样式，为图表添加数据选择的监听器。

   // 图表数据初始化
   aboutToAppear() {
       // 为图表添加数据选择的监听器。
       this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
       ...
       // 配置图表指定样式：如启用绘制网格背景。
       this.model.setDrawGridBackground(false);
       ...
   }

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

通过this.model.setData(this.data)将数据与图表配置类绑定。

   // 图表数据初始化
   aboutToAppear() {
       ...
       // 生成单一颜色数据
       this.data = this.getNormalData();
       // 将数据与图表配置类绑定
       this.model.setData(this.data);
       ...
   }

通过BarChart({ model: this.model })为组件设置配置构建类。

   build() {
       Column() {
       ...
       // 为组件设置配置构建类。
       BarChart({ model: this.model })
       ...
       }
   }

高性能知识点

不涉及

FAQ

使用三方库MpChart老版本3.0.0-rc.1，发现从应用首页进入MpChart页面然后返回首页，重复操作，应用内存上涨较大，每次上涨达2-5M。

答：使用@ohos/mpchart的版本3.0.1-rc.0后，重复上述操作，应用内存上涨大幅降低，每次上涨几百kB。补充说明：MpChart占用的内存，在退出页面后不会立即释放，底层会自动管理MpChart内存的释放。

工程结构&模块类型

   barchart                                        // har类型
   |---src\main\ets\view
   |   |---BarChart.ets                            // 视图层-MpChart柱状图页面