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

前言

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

柱状图作为图表中最常见之一的图表，柱状图可以直观地比较不同类别或时间段的数据大小。通过柱子的高度，我们可以快速看出各项数据的差异。柱状图可以展示数据的变化趋势，帮助我们发现数据的增长、减少或波动。如下图所示。

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（命令行窗口）输入如下的指令进行安装。

bash 复制代码

ohpm install @mcui/mccharts

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

绘制柱状图

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

1. 引入柱状图组件

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

javascript 复制代码

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

2. 绘制柱状图相关的属性

在Options 类中包含了设置柱状图的基本属性，涉及legend 、tooltip 、xAxis 、yAxis 、series 等属性。legend 属性设置图例的相关样式与功能。tooltip 属性设置提示层 的相关样式与功能。xAxis 属性设置X轴的相关样式与功能。yAxis 属性设置Y轴的相关样式与功能。series 属性设置柱状区的相关样式与功能。如下图所示。

3. 绘制默认柱状图

绘制您一周的收益和支出的柱状图，如下图所示。

3.1 布局文件

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

scss 复制代码

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

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

在Options 类中，我们可以通过属性来设置柱状图的样式，如设置图例的相关样式与功能，设置提示层 的相关样式与功能，设置X轴的相关样式与功能，设置Y轴的相关样式与功能，设置柱状区的相关样式与功能。具体代码如下所示：

less 复制代码

  @State defOptions: Options = new Options({
    yAxis: { //设置y轴的相关样式与功能
      name: '人民币'
    },
    xAxis: {//设置x轴的相关样式与功能
      data: ['周一', '周二', '周三', '周四', '周五', '六', '周日']
    },
    series: [ //设置柱状区的相关样式与功能
      {
        name: "收益", //图例文字
        data: [60, 50, 42, 75, 40, 60, 35] //数据
      },
      {
        name: "支出", //图例文字
        data: [40, 55, 19, 9, 21, 15, 11] //数据
      }
    ]
  })

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

4. 修饰柱状图

series属性用来设置柱状区的相关样式与功能。包含：柱状颜色、柱状拐点样式、柱状文本标签配置等等。详细的信息如下图所示：

series属性中可以修饰多条柱状区，可以理解为多条柱状区的集合，我们可以对柱状颜色、柱状拐点样式、柱状文本标签进行美化，代码如下所示：

less 复制代码

    series: [ //设置柱状区的相关样式与功能
      {
        name: "收益", //图例文字
        color: '#4783FE', //图例颜色
        stack: '', //是否显示堆叠柱子
        barStyle: { //柱状样式配置
          width: 14, //柱子宽度
          color: '#4783FE', //柱子颜色
          barGap: 1 //同系列之间的柱子间隙
        },
        data: [60, 50, 42, 75, 40, 60, 35] //数据
      },
      {
        name: "支出", //图例文字
        color: '#06B683', //图例颜色
        stack: '', //是否显示堆叠柱子
        barStyle: { //柱状样式配置
          width: 14, //柱子宽度
          color: '#06B683', //柱子颜色
          barGap: 1 //同系列之间的柱子间隙
        },
        data: [40, 55, 19, 9, 21, 15, 11] //数据
      }
    ]

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

在series 属性中，还支持显示堆叠柱子 ，只需将stack 参数的值设置为total即可，如下图所示：

通过观察以上两种类型的柱状图，我们会发现当状态图是叠加状态时文本标签处于居中模式，我们可以通过label属性配置文本标签的样式，代码如下所示：

less 复制代码

    series: [ //设置柱状区的相关样式与功能
      {
        ...
        label: { //系列文本标签样式配置
          show: true, //显示文本标签样
          color: '#FFFFFF', //字体颜色
          fontWeight: '600', //字体粗细
          fontFamily: 'sans-serif', //字体样式
          position: 'center', //文本显示位置
          fontSize: 22, //字体大小
          distanceToLabelLine: 5 //字体与柱状间距
        }
      },
      {
        ...
        label: { //系列文本标签样式配置
          show: true, //显示文本标签样
          color: '#FFFFFF', //字体颜色
          fontWeight: '600', //字体粗细
          fontFamily: 'sans-serif', //字体样式
          position: 'center', //文本显示位置
          fontSize: 22, //字体大小
          distanceToLabelLine: 5 //字体与柱状间距
        },
      }
    ]

在label 属性中，我们设置position 参数的值为center，在柱状图中文本标签会居中显示，如下图所示：

position 参数的值除了center ，还可以设置top （顶部）和bottom（底部）。

在柱状图中，文本标签还支持formatter函数，用来自定义显示内容，代码如下所示：

csharp 复制代码

    series: [ //设置柱状区的相关样式与功能
      {
        ...
        label: { //系列文本标签样式配置
          show: true, //显示文本标签样
          color: '#FFFFFF', //字体颜色
          fontWeight: '600', //字体粗细
          fontFamily: 'sans-serif', //字体样式
          position: 'center', //文本显示位置
          fontSize: 22, //字体大小
          formatter: (params) => { //文本内容自定义函数
            return '￥'+params.name
          },
          distanceToLabelLine: 5 //字体与柱状间距
        }
      },
      {
        ...
        label: { //系列文本标签样式配置
          show: true, //显示文本标签样
          color: '#FFFFFF', //字体颜色
          fontWeight: '600', //字体粗细
          fontFamily: 'sans-serif', //字体样式
          position: 'center', //文本显示位置
          fontSize: 22, //字体大小
          formatter: (params) => { //文本内容自定义函数
            return '￥'+params.name
          },
          distanceToLabelLine: 5 //字体与柱状间距
        },
      }
    ]

运行效果如下图所示：

5. 修饰图例

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

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

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

less 复制代码

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

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

6. 修饰x轴样式

在McCharts 框架中，可以看到x轴默认显示在图表的下方。我们可以使用xAxis属性来修饰x轴的样式，如设置x轴是否显示，x轴线的样式，刻度信息等，详细的信息如下图所示：

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

arduino 复制代码

    xAxis: {
      axisLabel: { //X轴文本标签样式配置
        color: '#999999', //字体颜色
        fontSize: 28, //字体大小
        fontWeight: '600' //字体粗线
      },
      axisTick: { //刻度线配置
        show: true, //控制刻度线显示与隐藏
        length: 6, // 刻度线的长度
        interval: 4, //刻度线与文本的间隔
        lineStyle: { //刻度线样式
          color: '#FFFFFF', //线颜色
          width: 1 //线宽度
        }
      },
      axisLine: { //x轴线配置
        show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏
        lineStyle: { //轴线样式
          color: '#D9D9D9', //线颜色
          width: 1, //线宽度
          type: 'solid' //线类型
        }
      },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },

运行效果如下图所示：

在xAxis 属性中，formatter函数用来格式化x轴文本标签的值，通过重写此方法使原来的数据转换成符合业务要求的文本格式，如我们将data中的数据替换成如下的格式。

kotlin 复制代码

data: ['1', '2', '3', '4', '5', '6', '7']

此时，x轴坐标的值显示如下所示：

此时，我们需要重写formatter函数，将data中的数据提取转换成我们需要的数据并返回值，代码如下所示：

javascript 复制代码

      formatter: function (name){
        switch (name){
          case '1':
            return '周一'
          case '2':
            return '周二'
          case '3':
            return '周三'
          case '4':
            return '周四'
          case '5':
            return '周五'
          case '6':
            return '周六'
          case '7':
            return '周日'
        }
      },
      data: ['1', '2', '3', '4', '5', '6', '7']

现在，x轴坐标的值显示如下所示：

7. 设置y轴样式

在McCharts 框架中，可以看到y轴默认显示在图表的左侧，目前还不支持右侧y轴的显示。我们可以使用yAxis 属性来修饰x轴的样式，和xAxis 属性相比，yAxis属性多了如下的配置。

如上图所示，yAxis属性中可以设置y轴的名称，并支持对字体的修改。还有就是在y轴中可以设置分割线的样式，如显示或隐藏y轴的分割线，并且还可以修饰分割线的样式。代码如下所示：

arduino 复制代码

    yAxis: {
      axisTick: { //刻度线配置
        length: 6, //刻度的长度
        lineStyle: { //刻度线样式
          color: '#FFFFFF', //线颜色
          width: 1 //线宽度
        }
      },
      axisLine: { //y轴线配置
        show: false //隐藏y轴线
      },
      splitLine: { // Y轴分割线配置。
        show: true, //显示分割线
        lineStyle: { //轴线样式
          color: '#D9D9D9', //线颜色
          width: 1 //线宽度
        }
      },
      axisLabel: { //y轴文本标签样式配置
        color: '#999999', //字体颜色
        fontSize: 28, //字体大小
        fontWeight: '600' //字体粗细
      },
      formatter: function (name) { //文本内容自定义函数
        return name + '万'
      }
    },

运行效果如下图所示：

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

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

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

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

go 复制代码

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

运行效果如下图所示：

总结

本文向您介绍了如何使用McCharts图表工具库中的柱状图，其实绘制柱状图的思路与绘制折线图的类似，其中修改图例，坐标轴等的属性也是相同的。整个使用过程中操作柱状图简洁明了，易于理解，非常适合Harmony OS的开发人员。