HarmonyOS鸿蒙Next 5莓创雷达图表series属性详解

HarmonyOS鸿蒙Next 5莓创雷达图表series属性详解大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解雷达图（McRadarChart）的series属性详细用法。作为图表数据展示的核心配置，series属性直接影响数据呈现形式和交互体验，下面我们逐一拆解每个属性的用法。

一、name属性

作用：定义数据系列的名称，用于图例（legend）的筛选和提示层（tooltip）的显示。
类型：string
默认值：空字符串
可选值：任意自定义字符串
场景：当雷达图需要展示多组数据时，通过不同名称区分不同系列。
代码示例：

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']（起始色到透明色）

代码示例：

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：边框颜色，默认#fff
  - width：边框宽度，默认1

代码示例：

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

代码示例：

series: [
  {
    name: '完成率',
    label: { show: true, color: '#F44336', fontSize: 14 },
    data: [90, 92, 88]
  }
]

五、data属性

作用：定义雷达图的数据值，支持数值或对象格式。
类型：Array<number | { value: number, ... }>
默认值：空数组
场景：核心数据输入，决定雷达图形状。

代码示例：

// 基础数值形式
data: [100, 80, 60]

// 对象形式（可附加自定义属性）
data: [
  { value: 100, itemStyle: { color: '#FF0000' } },
  { value: 80, itemStyle: { color: '#00FF00' } }
]

六、综合案例：产品多维度对比

需求：对比两款手机在性能、续航、拍照等维度的数据。
代码实现：

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]
  }
]

效果说明：