Appearance
散点图总览(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 |