鸿蒙开发：一个简单的散点图组件

前言

最近一段时间，都在拓展一些常见的组件开发，目前陆陆续续，已经推出了曲线底部导航组件，圆形动画菜单组件，滑块验证组件，星级评分组件，饼状图组件，App应用打印组件等，今天带来的依然是一个自定义组件，一个简单的散点图组件，当然了，如果大家需要什么组件，可以留言，尽可能的满足到大家。

我们先看一下组件的效果：

动态效果如下：

散点图和饼状图类似，都是作为数据可视化领域中的极具代表性的图表，可以说凭借直观、简洁的呈现方式，在多行业、多场景中发挥着不可替代的作用，其价值在于揭示数据背后的关联规律、分布特征及异常情况，为当局的决策者提供精准的数据支撑，其使用的场景也是司空见惯，常见于金融，商业数据分析等领域，它可以直观的展示比如股票收益率与波动率的关系，汇率变动与进出口数据的对应情况，产品销量与定价的关联趋势等等场景。

可以说，散点图使用的场景还是很多的，目前的组件已经上传到了中心仓库，大家可以进行选择使用，地址如下：

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fscatter

目前功能

1、支持单一颜色配置和多种颜色配置。

2、支持自绘制方格和不带方格两种效果。

3、支持数据动态调整。

4、所有属性均可自定义实现。

快速使用

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

Groovy 复制代码

ohpm install @abner/scatter

方式二：在需要的模块中的oh-package.json5中设置三方包依赖，配置示例如下：

Groovy 复制代码

"dependencies": { "@abner/scatter": "^1.0.0"}

代码使用

简单使用

TypeScript 复制代码

ScatterChartView({
  scatterChartData: this.scatterChartData
})
  .width("100%")
  .height(300)

带网格

TypeScript 复制代码

ScatterChartView({
  scatterChartData: this.scatterChartData,
  chartType: ScatterChartType.grid
})
  .width("100%")
  .height(300)

完整Demo

TypeScript 复制代码

import { ScatterChartData, ScatterChartType, ScatterChartView } from '@abner/scatter'
import { ActionBar } from '../../view/ActionBar'

/**
 *AUTHOR:AbnerMing
 *DATE:2026/1/17
 *INTRODUCE:散点图
 */
@Entry
  @ComponentV2
  struct ScatterChartPage {
    private colorArray: string[] = [
      '#3b82f6', '#ef4444', '#10b981', '#f59e0b',
      '#8b5cf6', '#06b6d4', '#6b7280', '#111827'
    ];
    private singleColor: string = '#3b82f6';
    @Local useMultiColor: boolean = true
    @Local scatterChartData: ScatterChartData[] = []

    aboutToAppear(): void {
      this.generateRandomPoints(10)
    }

    build() {
      Column() {
        ActionBar({ title: "散点图" })
        ScatterChartView({
          scatterChartData: this.scatterChartData
        })
          .width("100%")
          .height(300)

        ScatterChartView({
          scatterChartData: this.scatterChartData,
          chartType: ScatterChartType.grid
        })
          .width("100%")
          .height(300)

        Row() {
          Button("随机数据")
            .onClick(() => {
              this.generateRandomPoints(10)
            })
          Button("单色")
            .onClick(() => {
              this.useMultiColor = false
              this.generateRandomPoints(10)
            })
            .margin({ left: 10 })
          Button("多色")
            .margin({ left: 10 })
            .onClick(() => {
              this.useMultiColor = true
              this.generateRandomPoints(10)
            })
        }.margin({ top: 10 })
      }.width("100%")
        .height("100%")
    }

    // 生成随机数据点
    private generateRandomPoints(count: number) {
      this.scatterChartData = [];
      for (let i = 0; i < count; i++) {
        this.addRandomPoint();
      }
    }

    // 添加单个随机数据点
    private addRandomPoint() {
      const x = Math.random() * (100 - 0);
      const y = Math.random() * (100 - 0);
      const color =
        this.useMultiColor ? this.colorArray[Math.floor(Math.random() * this.colorArray.length)] : this.singleColor;
      this.scatterChartData.push({
        x: parseFloat(x.toFixed(2)),
        y: parseFloat(y.toFixed(2)),
        color: color
      })


    }
  }

属性介绍

常见属性配置如下：

|--------------------|------- | 属性 | chartType | ScatterChartType | minX | number | maxX | number | stepX | number | minY | number | maxY | number | stepY | number | marginLeft | number | marginRight | number | marginTop | number | marginBottom | number | scatterChartData | ScatterChartData | scatterSize | number | scaleTextSize | number | scaleTextColor | scaleLineColor | scaleLineWidth | number | isShowXLabel | boolean | isShowYLabel | boolean | labelTextX | string | labelTextY | string | labelTextSize | number | labelTextColor | scatterXYLineColor | scatterXYLineWidth | number | gridBgColor | gridLineColor | gridLineWidth | number | gridStrokeColor | gridStrokeWidth | number ----------------------------------------|---------------------------------------|
| 类型 | 概述 |
| 散点图类型，默认：ScatterChartType.default，无网格 |
| x轴最小坐标,默认为0 |
| x轴最大坐标 ,默认为100 |
| x轴步长，默认20 |
| y轴最小坐标 ,默认为0 |
| y轴最大坐标 ,默认为100 |
| y轴步长，默认20 |
| 距离左边，默认50 |
| 距离右边，默认30 |
| 距离上边，默认30 |
| 距离下边，默认50 |
| 散点图数据 |
| 散点图大小，默认3 |
| XY轴的刻度值大小 |
| string/ number/ CanvasGradient/ CanvasPattern | XY轴的刻度颜色 |
| string/ number/ CanvasGradient/ CanvasPattern | 刻度线颜色 |
| 刻度线粗细 |
| 是否显示X轴标签，默认fasle不显示 |
| 是否显示Y轴标签，默认fasle不显示 |
| X轴标签 |
| Y轴标签 |
| 标签文字大小，默认14 |
| string/ number/ CanvasGradient/ CanvasPattern | 标签文字颜色 |
| string/ number/ CanvasGradient/ CanvasPattern | XY轴颜色 |
| XY轴宽度，默认1 |
| string/ number/ CanvasGradient/ CanvasPattern | 网格背景 |
| string/ number/ CanvasGradient/ CanvasPattern | 网格线颜色 |
| 网格线粗细 |
| string/ number/ CanvasGradient/ CanvasPattern | 网格边框颜色 |
| 网格线边框粗细 |

鸿蒙开发：一个简单的散点图组件

前言

目前功能

快速使用

代码使用

简单使用

带网格

完整Demo

属性介绍

相关总结