Appearance
雷达图总览(HarmonyOS / ArkTS)
摘要:HarmonyCharts 雷达图适用于多维指标对比与画像展示,支持基础/对比/填充形态,满足鸿蒙场景下的能力评估需求。
建议阅读顺序:
- 快速开始(完整可运行页面)
- 完整示例配置(直接作为模板)
- 默认值(精确工程默认)
- API Reference(完整参数表)
功能说明(What)
雷达图用于展示多维度指标对比,适合能力画像、综合评分与多指标对照。
应用场景(When)
- 多维指标对比(如性能、质量、体验)
- 画像类展示(用户画像、产品画像)
- 对照多对象的多维表现
快速开始(入口)
完整示例配置(整页可用)
ts
const option: HarmonyChartsOption = {
radar: {
indicator: [
{ name: 'Speed', max: 100 },
{ name: 'Quality', max: 100 },
{ name: 'Reliability', max: 100 },
{ name: 'Flexibility', max: 100 },
{ name: 'Cost', max: 100 }
],
center: ['50%', '50%'],
radius: '70%'
},
tooltip: { show: true, trigger: 'item', confine: true },
legend: { show: true },
series: [{
type: 'radar',
name: 'Radar',
data: [
{ name: 'Plan', value: [70, 80, 65, 75, 60] },
{ name: 'Actual', value: [60, 72, 70, 68, 55] }
]
}]
};示例图
默认值(精确工程默认)
默认值来自 BaseRadar 组件。
BaseRadar 默认 radar
| 项 | 默认值 |
|---|---|
| indicator | Speed / Quality / Reliability / Flexibility / Cost(max: 100) |
| center | ['50%','50%'] |
| radius | '70%' |
| shape | 'polygon' |
| axisLine | { show: false } |
| splitLine | { show: false } |
| splitArea | { show: false } |
| axisLabel | { show: false } |
| axisName | { show: false } |
BaseRadar 默认 option
| 项 | 默认值 |
|---|---|
| tooltip | { show: true, trigger: 'item', confine: true } |
| legend | { show: true } |
| xAxis/yAxis | 轴线/刻度/标签/分割线/分割区全部 show: false |
BaseRadar 默认 series(未传 data 时)
| 项 | 默认值 |
|---|---|
| name | 'Radar' |
| data | Plan: [70,80,65,75,60], Actual: [60,72,70,68,55] |
| itemStyle.color | 主题色板(按序:#5470C6, #91CC75, #FAC858...) |
| lineStyle | { width: 2 }(每个数据点默认颜色同 itemStyle) |