HarmonyOS鸿蒙NEXT应用开发中如何通过使用@ohos/mpchart绘制支出分布饼图？

HarmonyOS鸿蒙NEXT应用开发中如何通过使用@ohos/mpchart绘制支出分布饼图？ 需要一个以饼图查看支出分布的示例demo，如何使用@ohos/mpchart绘制饼状图，将支出数据可视化？该功能可使用户可通过饼图了解支出分布及比重

3 回复

参考文档：绘制支出分布饼图

更多关于HarmonyOS鸿蒙NEXT应用开发中如何通过使用@ohos/mpchart绘制支出分布饼图？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS NEXT中，使用@ohos/mpchart绘制支出分布饼图需先引入模块：import { PieChart } from '[@ohos](/user/ohos)/mpchart'。创建PieChart实例并配置数据，通过setData()方法传入包含支出类别和数值的数据集。使用setCenterText()设置饼图中心文本，如“支出分布”。通过setDrawEntryLabels()控制是否显示标签。最后调用invalidate()刷新图表。确保数据格式为数组对象，包含value和label属性。

在HarmonyOS NEXT中，使用@ohos/mpchart绘制支出分布饼图可通过以下步骤实现：

  1. 环境配置
    在module.json5中声明图表权限：

    {
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.MPCHART"
      }
    ]
  }
}

  2. 导入模块

    import { PieChart, PieDataSet, PieData } from '[@ohos](/user/ohos)/mpchart';

  3. 创建饼图数据

    // 支出数据示例
const expenses = [
  { label: '餐饮', value: 1200 },
  { label: '交通', value: 800 },
  { label: '购物', value: 1500 }
];

const entries = expenses.map((item, index) => {
  return { y: item.value, label: item.label };
});

const dataSet = new PieDataSet(entries, '支出分布');
dataSet.setColors(['#FF6B6B', '#48DBFB', '#1DD1A1']); // 设置切片颜色

  4. 配置饼图属性

    const pieData = new PieData([dataSet]);
pieChart.setData(pieData);
pieChart.setDrawEntryLabels(true); // 显示标签
pieChart.setUsePercentValues(true); // 显示百分比
pieChart.getDescription().setEnabled(false); // 隐藏描述

  5. 完整示例代码

    [@Component](/user/Component)
struct ExpensePieChart {
  private pieChart: PieChart = new PieChart();

  build() {
    Column() {
      this.pieChart
        .width('100%')
        .height(300)
        .onChartRender(() => {
          this.renderChart();
        })
    }
  }

  private renderChart() {
    const expenses = [
      { label: '餐饮', value: 1200 },
      { label: '交通', value: 800 },
      { label: '购物', value: 1500 }
    ];

    const entries = expenses.map((item) => ({ y: item.value, label: item.label }));
    const dataSet = new PieDataSet(entries, '支出分布');
    
    dataSet.setColors(['#FF6B6B', '#48DBFB', '#1DD1A1']);
    dataSet.setValueTextSize(12);
    
    const pieData = new PieData([dataSet]);
    this.pieChart.setData(pieData);
    this.pieChart.setDrawEntryLabels(true);
    this.pieChart.setUsePercentValues(true);
    this.pieChart.invalidate(); // 刷新图表
  }
}

该实现会生成带有颜色区分、百分比显示和标签的饼图，直观展示各项支出占比。可通过修改expenses数组数据动态更新图表内容。

回到顶部