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

前言

本文主要讲解使用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(命令行窗口)输入如下的指令进行安装。

ohpm install @mcui/mccharts

安装完成后,可以检查oh-package.json5文件中是否已经添加了mccharts的依赖。如下图所示。
鸿蒙数据可视化系列之使用McCharts框架绘制散点图

绘制散点图

McCharts组件库中,要绘制散点图可以使用McPointChart组件。绘制散点图的相关属性也都在此自定义组件中。

1. 引入散点图组件

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

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

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

Options类中包含了设置散点图的基本属性,涉及legendtooltipxAxisyAxisseries等属性。legend属性设置图例的相关样式与功能。tooltip属性设置提示层的相关样式与功能。xAxis属性设置X轴的相关样式与功能。yAxis属性设置Y轴的相关样式与功能。series属性设置散点区的相关样式与功能。如下图所示。
鸿蒙数据可视化系列之使用McCharts框架绘制散点图

3. 绘制默认散点图

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

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

3.1 布局文件

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

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

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

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

    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: '分数'}
        ]
      }
    ]

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

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

4. 修饰散点图

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

鸿蒙数据可视化系列之使用McCharts框架绘制散点图
series属性中可以修饰多组散点区,可以理解为多组散点区的集合,我们可以对散点颜色、散点拐点样式、散点文本标签进行美化,代码如下所示:

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

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

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

5. 修饰图例

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

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

我们可以对图例的显示方式和位置等进行设置。在McCharts框架中可以使用legend属性来修饰图例,该属性提供了一些常用方法。如图下图所示:
鸿蒙数据可视化系列之使用McCharts框架绘制散点图

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

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

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

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

6. 修饰x轴样式

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

鸿蒙数据可视化系列之使用McCharts框架绘制散点图
鸿蒙数据可视化系列之使用McCharts框架绘制散点图
我们可以通过修改xAxis属性中的参数,并对其进行设置。代码如下所示:

    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' //线类型
        }
      }
    },

运行效果如下图所示:

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

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

7. 设置y轴样式

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

鸿蒙数据可视化系列之使用McCharts框架绘制散点图
如上图所示,yAxis属性中可以设置y轴的名称,并支持对字体的修改。还有就是在y轴中可以设置分割线的样式,如显示或隐藏y轴的分割线,并且还可以修饰分割线的样式。代码如下所示:

    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' //字体粗细
      }
    },

运行效果如下图所示:

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

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

McCharts框架中,支持对图表的交互操作,如当我们点击散点图中的散点区时会弹出提示层,如下图所示:

鸿蒙数据可视化系列之使用McCharts框架绘制散点图
可以使用tooltip属性来设置提示层的相关样式与功能,其中包含:提示层的样式、提示层类型、提示线的配置等等,详细的信息如下图所示:

鸿蒙数据可视化系列之使用McCharts框架绘制散点图
鸿蒙数据可视化系列之使用McCharts框架绘制散点图
我们可以通过修改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 //字体大小
      }
    },

运行效果如下图所示:

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

9. 总结

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

原文链接:https://juejin.cn/post/7347912334701346835 作者:亭峰科技

(0)
上一篇 2024年3月20日 上午10:11
下一篇 2024年3月20日 上午10:22

相关推荐

发表回复

登录后才能评论