鸿蒙数据可视化系列之使用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 组件库中，要绘制散点图可以使用McPointChart组件。绘制散点图的相关属性也都在此自定义组件中。

1. 引入散点图组件

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

javascript 复制代码

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

2. 绘制散点图相关的属性

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

3. 绘制默认散点图

绘制某咖啡店服务满意度与排队时间相关分析，如下图所示。

3.1 布局文件

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

scss 复制代码

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

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

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

yaml 复制代码

    series:[//设置散点区的相关样式与功能
      {
        name:'相关分析', //系列名称
        data: [ //系列数据
          //xVal: x轴坐标值 yVal:y轴坐标值 num: 实际散点值 name:散点对应名称
          {xVal: 3, yVal: 4, num: 4, name: '分数'}, 
          {xVal: 4, yVal: 4.5, num: 4.5, name: '分数'},
          {xVal: 6, yVal: 4, num: 4, name: '分数'},
          {xVal: 6, yVal: 4.2, num: 4.2, name: '分数'},
          {xVal: 7, yVal: 2, num: 2, name: '分数'},
          {xVal: 7, yVal: 3.5, num: 3.5, name: '分数'},
          {xVal: 9, yVal: 3, num: 3, name: '分数'},
          {xVal: 10, yVal: 2.5, num: 2.5, name: '分数'},
          {xVal: 11, yVal: 3, num: 3, name: '分数'},
          {xVal: 12, yVal: 2.5, num: 2.5, name: '分数'},
          {xVal: 13, yVal: 1, num: 1, name: '分数'},
          {xVal: 13, yVal: 2.3, num: 2.3, name: '分数'},
          {xVal: 14, yVal: 0.5, num: 0.5, name: '分数'},
          {xVal: 15, yVal: 1.2, num: 1.2, name: '分数'}
        ]
      }
    ]

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

4. 修饰散点图

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

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

kotlin 复制代码

    series:[//设置散点区的相关样式与功能
      {
        name:'相关分析', //系列名称
        color: '#06B683', //系列颜色
        symbolSize: function (data) { //散点大小
          return data.yVal
        },
        data: [
            ...
        ]
      }
    ]

以上我们对散点区进行了美化，其中symbolSize 函数用来返回散点的大小，这里散点的大小与yVal一致，您还可以设置为固定的数值，运行效果如下图所示：

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: {//设置x轴的相关样式与功能
      axisLabel: { //X轴文本标签样式配置
        color: '#999999', //字体颜色
        fontSize: 28, //字体大小
        fontWeight: '600' //字体粗线
      },
      axisTick: { //刻度线配置
        length: 6, // 刻度线的长度
        lineStyle: { //刻度线样式
          color: '#06B683', //线颜色
          width: 1 //线宽度
        }
      },
      axisLine: { //x轴线配置
        show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏
        lineStyle: { //轴线样式
          color: '#06B683', //线颜色
          width: 2, //线宽度
          type: 'solid' //线类型
        }
      }
    },

运行效果如下图所示：

与折线图和柱状图不同的是，在xAxis 属性中，不支持formatter 函数和data参数。

7. 设置y轴样式

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

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

arduino 复制代码

    yAxis: { //设置y轴的相关样式与功能
      name: '分数', //Y轴名称
      nameTextStyle: { //Y轴名称样式配置
        color: '#06B683', //字体颜色
        fontSize: 30, //字体大小
        fontWeight: '600' //字体粗细
      },
      axisTick: { //刻度线配置
        length: 6, //刻度的长度
        lineStyle: { //刻度线样式
          color: '#06B683', //线颜色
          width: 1 //线宽度
        }
      },
      axisLine: { //y轴线配置
        show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏
        lineStyle: { //轴线样式
          color: '#06B683', //线颜色
          width: 2, //线宽度
          type: 'solid' //线类型
        }
      },
      splitLine: { // Y轴分割线配置。
        show: false //隐藏
      },
      axisLabel: { //y轴文本标签样式配置
        color: '#999999', //字体颜色
        fontSize: 28, //字体大小
        fontWeight: '600' //字体粗细
      }
    },

运行效果如下图所示：

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 //字体大小
      }
    },

运行效果如下图所示：

9. 总结

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