Appearance
分组散点
功能说明(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 })
}
}
}运行结果
完整示例配置(整页可用)
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 进行组间开关控制。