HarmonyOS Next 使用MPCharts图形实现案例

最新推荐文章于 2024-09-28 09:37:43 发布

蜀道山QAQ

最新推荐文章于 2024-09-28 09:37:43 发布

阅读量1.1k

点赞数 8

分类专栏：鸿蒙实战案例鸿蒙文章标签： harmonyos 华为 android 鸿蒙系统鸿蒙

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137015774

版权

鸿蒙同时被 2 个专栏收录

631 篇文章 87 订阅

订阅专栏

鸿蒙实战案例

134 篇文章 10 订阅

订阅专栏

本文介绍了如何在HarmonyOS应用中利用第三方库MpChart实现柱状图功能，包括配置参数如堆叠数据、轴显示和样式，以及针对老版本内存问题的优化策略。同时提到了鸿蒙开发所需的核心技术和资源，为开发者提供学习路径和资料链接。

摘要由CSDN通过智能技术生成

介绍

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

效果图预览

使用说明

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

实现思路

通过this.model = new BarChartModel()初始化图表配置构建类。源码参考BarChart.ets。

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

配置图表指定样式，为图表添加数据选择的监听器。源码参考BarChart.ets。

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

通过this.model.setData(this.data)将数据与图表配置类绑定。源码参考BarChart.ets。

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

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

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柱状图页面

模块依赖

@ohos/routermodule(动态路由)

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料