大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解雷达图（McRadarChart）的series属性详细用法。作为图表数据展示的核心配置，series属性直接影响数据呈现形式和交互体验，下面我们逐一拆解每个属性的用法。
一、name属性
作用：定义数据系列的名称，用于图例（legend）的筛选和提示层（tooltip）的显示。 类型：string 默认值：空字符串 可选值：任意自定义字符串 场景：当雷达图需要展示多组数据时，通过不同名称区分不同系列。 代码示例：
css
series: [
{ name: '销量', data: [80, 90, 70] },
{ name: '库存', data: [50, 60, 40] }
]二、areaStyle属性
作用：控制雷达图数据区域的填充样式，支持单色或渐变填充。 类型：Object 默认值：{ show: true, color: ['#296DFF', '#296DFF33'] } 场景：需要突出数据区域范围时使用，如对比两组数据的覆盖面积。
子属性详解
- show
- 作用：是否显示区域填充。
- 类型：
boolean - 默认值：
true - 可选值：
true（显示）、false（隐藏）
- color
- 作用：设置填充颜色，支持单色或线性渐变。
- 类型：
string | string[] - 默认值：蓝色渐变
- 可选值：
- 单色：
'#FF0000' - 渐变：
['#FF0000', '#00FF0033']（起始色到透明色）
代码示例：
css
series: [
{
name: '性能评分',
areaStyle: {
show: true,
color: ['#FF5722', '#FF572233'] // 橙色到透明渐变
},
data: [95, 85, 90]
}
]三、point属性
作用：配置雷达图数据点的显示样式，包括大小、颜色和边框。 类型：Object 默认值：{ show: true, size: 4, color: '#296DFF', border: { color: '#fff', width: 1 } } 场景：需要强调数据节点的具体位置时使用。
子属性详解
- show
- 作用：是否显示数据点。
- 类型：
boolean - 默认值：
true
- size
- 作用：数据点的大小。
- 类型：
number - 默认值：
4
- color
- 作用：数据点填充颜色。
- 类型：
string - 默认值：与系列主色一致
- border
- 作用：数据点边框样式。
- 类型：
Object - 子属性：
color：边框颜色，默认#fffwidth：边框宽度，默认1
代码示例：
yaml
series: [
{
name: '用户满意度',
point: {
show: true,
size: 6,
color: '#8BC34A',
border: { color: '#333', width: 2 }
},
data: [75, 80, 85]
}
]四、label属性
作用：控制数据点数值标签的显示和样式。 类型：Object 默认值：{ show: false, color: '#666', fontSize: 12 } 场景：需要直接在图表中显示具体数值时启用。
子属性详解
- show
- 作用：是否显示标签。
- 类型：
boolean - 默认值：
false
- color
- 作用：标签文字颜色。
- 类型：
string - 默认值：
#666
- fontSize
- 作用：标签文字大小。
- 类型：
number - 默认值：
12
代码示例：
yaml
series: [
{
name: '完成率',
label: { show: true, color: '#F44336', fontSize: 14 },
data: [90, 92, 88]
}
]五、data属性
作用：定义雷达图的数据值，支持数值或对象格式。 类型：Array<number | { value: number, ... }> 默认值：空数组 场景：核心数据输入，决定雷达图形状。
代码示例：
css
// 基础数值形式
data: [100, 80, 60]
// 对象形式（可附加自定义属性）
data: [
{ value: 100, itemStyle: { color: '#FF0000' } },
{ value: 80, itemStyle: { color: '#00FF00' } }
]六、综合案例：产品多维度对比
需求：对比两款手机在性能、续航、拍照等维度的数据。 代码实现：
css
series: [
{
name: '手机A',
areaStyle: { color: ['#2196F3', '#2196F333'] },
point: { size: 5, color: '#2196F3' },
label: { show: true, color: '#2196F3' },
data: [95, 85, 90, 88, 92]
},
{
name: '手机B',
areaStyle: { color: ['#FF5722', '#FF572233'] },
point: { size: 5, color: '#FF5722' },
label: { show: true, color: '#FF5722' },
data: [85, 90, 80, 85, 88]
}
]效果说明：
- 通过不同颜色的区域填充区分两款产品。
- 数据点放大显示，标签直接展示数值。
- 多边形覆盖面积直观反映综合性能差异。
好，这期讲到这里就结束了，希望大家能通过本文掌握雷达图series属性的深度用法，在实际项目中灵活运用颜色、标签、数据点等配置，打造出专业级的数据可视化效果。我们下期再见！