Appearance
你正在查看 v1.0.1 文档。切换到最新版请访问：/
散点图总览（HarmonyOS / ArkTS）
摘要：HarmonyCharts 散点图用于分布与相关性分析，支持基础/分组/气泡等形态，适合在鸿蒙场景中展示多维数据关系。
建议阅读顺序：
- 快速开始（完整可运行页面）
- 完整示例配置（直接作为模板）
- 默认值（精确工程默认）
- API Reference（完整参数表）
功能说明（What）
散点图用于展示数据分布与相关性，适合观测离散点的聚合、离群与趋势。
应用场景（When）
适用：
- 分布与相关性分析
- 异常点检测
- 多维度关系展示（x/y + size + color）
不适合：
- 时间序列趋势（更适合折线）
- 类别计数对比（更适合柱状）
快速开始（入口）
完整示例配置（整页可用）
ts
const option: HarmonyChartsOption = {
grid: { top: 28, left: 12, right: 12, bottom: 24 },
tooltip: { show: true, trigger: 'item', triggerOn: 'mousemove', confine: true },
legend: { show: true },
xAxis: { type: 'value', axisLabel: { show: true } },
yAxis: { type: 'value', includeZero: true, axisLabel: { show: true } },
series: [
{ type: 'scatter', name: 'A', data: [[10, 20], [15, 35], [20, 22], [25, 45], [30, 28], [35, 55]], symbol: 'circle', symbolSize: 8 }
]
};示例图
默认值（精确工程默认）
默认值来自 BaseScatter 组件。
BaseScatter 默认 option
| 项 | 默认值 |
|---|---|
| grid | { top: 28, left: 12, right: 12, bottom: 24 } |
| tooltip | { show: true, trigger: 'item', triggerOn: 'mousemove', confine: true } |
| legend | { show: true } |
| xAxis.type | 'value' |
| xAxis.boundaryGap | false |
| xAxis.axisLine | { show: true, lineStyle: { width: 1, color: '#909399' } } |
| xAxis.axisTick | { show: true, length: 6, lineStyle: { width: 1, color: '#C0C4CC' } } |
| xAxis.splitLine | { show: true, lineStyle: { color: '#EBEEF5', dash: [4,4], width: 1 } } |
| xAxis.axisLabel | { show: true, color: '#606266', fontSize: 12, margin: 8 } |
| yAxis.type | 'value' |
| yAxis.includeZero | true |
| yAxis.axisLine | { show: true, lineStyle: { width: 1, color: '#909399' } } |
| yAxis.axisTick | { show: true, length: 6, lineStyle: { width: 1, color: '#C0C4CC' } } |
| yAxis.splitLine | { show: true, lineStyle: { color: '#EBEEF5', dash: [4,4], width: 1 } } |
| yAxis.axisLabel | { show: true, color: '#606266', fontSize: 12, margin: 8 } |
BaseScatter 默认 series（未传 series 时）
| 项 | 默认值 |
|---|---|
| type | 'scatter' |
| name | 'Series A' |
| data | [[10,20],[15,35],[20,22],[25,45],[30,28],[35,55]] |
| color | '#5470C6' |
| symbol | 'circle' |
| symbolSize | 8 |
BaseScatter 默认 series（传入 series 但未指定字段）
| 项 | 默认值 |
|---|---|
| color | 主题色板（按序：#5470C6, #91CC75, #FAC858, #EE6666, #73C0DE, #3BA272, #FC8452, #9A60B4, #EA7CCC） |
| symbol | 'circle' |
| symbolSize | 8 |