Skip to content

分组散点

功能说明(What)

分组散点用于多系列分组对比,便于观察不同组的分布差异。

应用场景(When)

  • 多组样本分布对比
  • 分层/分群差异分析

快速上手(How - Quick)

ts
import { BaseScatter } from '@ymhc/harmonycharts';
import type { BaseScatterConfig } from '@ymhc/harmonycharts';

@Entry
struct Index {
  @Prop baseScatterConfig: BaseScatterConfig = {
    series: [
      { name: 'Group A', data: [[10, 20], [15, 35], [20, 22]] },
      { name: 'Group B', data: [[12, 18], [18, 30], [24, 40]] }
    ],
    tooltip: { show: true, trigger: 'item', confine: true },
    legend: { show: true }
  };

  build() {
    Column() {
      BaseScatter({ config: this.baseScatterConfig, chartHeight: 220 })
    }
  }
}

运行结果

scatter group

完整示例配置(整页可用)

ts
const option: HarmonyChartsOption = {
  grid: { top: 28, left: 12, right: 12, bottom: 24 },
  tooltip: { show: true, trigger: 'item', confine: true },
  legend: { show: true },
  xAxis: { type: 'value' },
  yAxis: { type: 'value', includeZero: true },
  series: [
    { type: 'scatter', name: 'Group A', data: [[10, 20], [15, 35], [20, 22]] },
    { type: 'scatter', name: 'Group B', data: [[12, 18], [18, 30], [24, 40]] }
  ]
};

默认值(精确工程默认)

该页面默认值与 BaseScatter 一致,详见总览页「默认值(精确工程默认)」。

配置项说明(API)

参数说明类型默认值
color系列颜色string | GradientColor主题色板
legendIcon图例图标'rect' | 'circle' | 'line'-

事件与交互(Events)

ts
chart.on('click', (params) => {
  // params.seriesType === 'scatter'
});

高级用法(Advanced)

  • 多轴分组与 grid 联动

注意事项 / 设计说明(Notes)

  • 建议搭配 legend 进行组间开关控制。

HarmonyCharts 鸿蒙图表文档。