鸿蒙5.0开发进阶：使用MPCharts图形实现案例

最新推荐文章于 2025-02-13 20:26:29 发布

焦味猪腩饭

最新推荐文章于 2025-02-13 20:26:29 发布

阅读量573

点赞数 11

分类专栏：鸿蒙5.0 文章标签： harmonyos 华为 1024程序员节 android 嵌入式硬件前端鸿蒙系统

本文链接：https://blog.youkuaiyun.com/HSMMQAQ/article/details/143368541

版权

鸿蒙5.0 专栏收录该内容

171 篇文章

订阅专栏

往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）

介绍

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);
    ...
}

通过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 })
    ...
    }
}

高性能知识点

不涉及

工程结构&模块类型

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