鸿蒙数据可视化系列之使用McCharts框架绘制饼图

编程先锋
1,728 阅读7分钟

前言

本文主要讲解使用McCharts图表工具库实现数据可视化的过程。通过学习McCharts等图表工具库，了解这些工具的使用以及用不同的方法实现数据可视化。

饼图作为图表中最常见之一的图表，饼图可以直观地展示各个部分所占的比例，帮助用户快速了解数据的分布情况。通过对比不同饼块的大小，用户可以轻松比较不同类别之间的差异。如下图所示。

3333.gif

McCharts是什么？

McCharts(莓创图表)是McUI提供的一款开箱即用的图表工具库,专为Harmony OS的所有类型的开发人员而设计。该组件库目前支持折线图、柱状图、饼图、散点图。

McCharts是一个基于ArkTS语法封装的图表组件，你可以运行在ArkTS 3+版本（DevEco Studio 3.1.1+）以上的任意版本当中。

为什么选择McCharts？

  • McCharts是一款自研开发的公共组件，基于ArkTS最新版本。意味着HarmonyOS的新特性我们都支持，并拥有一个庞大的社区，您将拥有所有创建和制作项目的帮助和文档。
  • 每个组件都是独立化的，更好地避免导入不必要的代码。
  • 所有开发者拥有创建、改进和纠正任何组件或功能的开源社区。
  • 提供了配套的设计资源，充分满足可定制化的需求。

安装

使用McCharts框架绘制饼图之前需要引入该框架。

McCharts已经使用OpenHarmony三方库进行托管，你可以使用OpenHarmony提供的ohpm工具安装McCharts。在DevEco Studio中，您可以在Terminal（命令行窗口）输入如下的指令进行安装。

ohpm install @mcui/mccharts

安装完成后，可以检查oh-package.json5文件中是否已经添加了mccharts的依赖。如下图所示。 image.png

绘制饼图

在McCharts组件库中，要绘制饼图可以使用McPieChart组件。绘制饼图的相关属性也都在此自定义组件中。

1. 引入饼图组件

在项目中要想绘制饼图，首先要引入McPieChart组件，代码如下所示：

import { McPieChart, Options } from '@mcui/mccharts'

2. 绘制饼图相关的属性

绘制饼图的方式与折线图、柱状图的绘制方式一致。

在Options类中包含了设置饼图的基本属性，涉及color、legend、tooltip、series等属性。color是调色盘颜色列表。legend属性设置图例的相关样式与功能。tooltip属性设置提示层的相关样式与功能。series属性设置饼状区域样式与功能。如下图所示。 image.png

3. 绘制默认饼图

绘制您一周的任务统计的饼图，如下图所示。

image.png

3.1 布局文件

在界面中，添加一个McPieChart组件用来显示饼图。代码如下所示：

Column() {
    //添加饼图组件
    McPieChart({ options: this.defOptions }).width('100%')
}.width('100%').height(200).backgroundColor('#FFFFFF').borderRadius(10)

3.2 创建Options类，设置饼图的基础属性

在Options类中，我们可以通过属性来设置饼图的样式，如设置图例的相关样式与功能，设置提示层的相关样式与功能，设置饼状区域的相关样式与功能。与绘制折线图和柱状图不同的是，绘制饼图不需要绘制x轴和y轴，具体代码如下所示：

  @State defOptions: Options = new Options({
    series: [ //饼状区域样式与功能配置
      {
        data: [ //数据
          { value: 435, name: '待执行' },
          { value: 310, name: '执行中' },
          { value: 234, name: '已完成' },
          { value: 135, name: '任务异常' }
        ]
      }
    ]
  })

以上就是绘制饼图的核心代码，运行效果如下图所示：

image.png

4. 修饰饼图

series属性用来设置饼状区域的相关样式与功能。包含：饼状区大小、位置、文本标签样式配置、高亮配置等等。详细的信息如下图所示：

image.png image.png image.png series属性可以对饼状区大小、位置、文本标签样式进行美化，代码如下所示：

@State defOptions: Options = new Options({
  series: [ //饼状区域样式与功能配置
    {
      labelLine: { //文本连接线样式配置
        length: 10, //连接线1的长度
        length2: 30, //连接线2的长度
        lineStyle: { //提示线样式
          width: 1, //线宽度
          color: '#FAAD14' //线颜色
        }
      },
      label: { //系列文本标签样式配置
        show: true, //是否显示文本标签
        fontWeight: '800', //字体粗细
        fontFamily: 'sans-serif',
        color: '#333', //字体颜色
        position: 'outside', //文本显示位置
        fontSize: 30, //字体大小
        formatter: (params) => { //文本内容自定义函数
          return params.name
        },
        distanceToLabelLine: 6 //字体与饼状间距
      },
      data: [ //数据
        { value: 435, name: '待执行' },
        { value: 310, name: '执行中' },
        { value: 234, name: '已完成' },
        { value: 135, name: '任务异常' }
      ]
    },
  ]
})

以上我们对饼状区进行了美化，运行效果如下图所示：

image.png

在series属性中，文本显示位置默认显示在外部，可以修改position参数的值，将其设置为center，文本就会居中显示。如下图所示：

image.png

通过series中的属性来设置为环形图状，在radius参数中可以设置饼图内半径与外半径，一个表示全圆，两个表示外半径与内半径，从而形成环形(最多可以设置两个)。代码如下所示：

radius: ['70%','50%'], //饼图内半径与外半径

如下图所示：

image.png

在饼图中，当点击饼状区时还支持设置饼图高亮样式，通过emphasis参数可以设置饼图高亮样式，例如，可以设置缩放大小,高亮阴影颜色,高亮阴影大小等，详细的信息如下图所示：

image.png 点击的效果如下图所示：

image.png

5. 自定义调色盘颜色

在饼图中，饼状区的颜色会按照默认的调色盘颜色进行设置，通过color属性，可以设置调色盘颜色的颜色，代码如下所示：

@State defOptions: Options = new Options({
  color: ['#FAAD14', '#3C73FF', '#52C41A', '#FF4D4F'],//调色盘颜色列表
  series: [ //饼状区域样式与功能配置
    {
      data: [ //数据
        { value: 435, name: '待执行' },
        { value: 310, name: '执行中' },
        { value: 234, name: '已完成' },
        { value: 135, name: '任务异常' }
      ]
    },
  ]
})

以上我们重新设置了调色盘的颜色，饼状区的颜色会通过数据列表自动填充，运行效果如下图所示：

image.png

6. 修饰图例

默认情况下，设置图表数据后自动生成和绘制图例。图例通常由多个条目组成，每个条目由一个标签、一个形状表示，如图下图所示：

image.png

我们可以对图例的显示方式和位置等进行设置。在McCharts框架中可以使用legend属性来修饰图例，该属性提供了一些常用方法。如下图所示：

image.png 我们可以通过修改legend属性中的参数，并对其进行设置。代码如下所示：

    legend: { //设置图例的相关样式与功能
      top: '5%', //图例距离顶部侧位置
      itemWidth: 10, //图形的宽度
      itemHeight: 10, //图形的高度
      textStyle: { //文本样式配置
        color: '#FAAD14', //字体颜色
        fontSize: 30, //字体大小
        fontWeight: '800' //字体粗细
      }
    },

以上我们对图例进行了美化，运行效果如下图所示：

image.png

7. 设置提示层的相关样式与功能

在McCharts框架中，支持对图表的交互操作，如当我们点击饼图中的饼状区时会弹出提示层，如下图所示：

image.png

可以使用tooltip属性来设置提示层的相关样式与功能，其中包含：提示层的样式、提示层类型、提示线的配置等等，详细的信息如下图所示：

image.png image.png 我们可以通过修改tooltip属性中的参数，并对其进行设置。代码如下所示：

    tooltip: { //设置提示层的相关样式与功能
      axisPointer: { //指示器配置项
        type: 'line', //指示器类型
        lineStyle: { //提示线样式
          color: '#D9D9D9', //线颜色
          width: 2, //线宽度
          type: 'solid' //线类型
        }
      },
      backgroundColor: '#FFFFFF', //提示框背景颜色
      borderColor: '#C4C4C4', //提示框边框颜色
      borderWidth: 1, //提示框边框宽度
      padding: 6, //提示框内边距
      textStyle: { //文本样式配置
        color: '#666666', //字体颜色
        fontSize: 14 //字体大小
      }
    },

运行效果如下图所示：

image.png

总结

本文向您介绍了如何使用McCharts图表工具库中的饼图，其实绘制柱状图的思路与绘制折线图和柱状图的类似。整个使用过程中操作饼图简洁明了，易于理解，非常适合Harmony OS的开发人员。

avatar
文章
阅读
粉丝