大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解雷达图组件McRadarChart的基础属性详细用法。

一、grid 属性

作用：控制直角坐标系内绘图网格的布局，用于设置图表内容与容器的边距关系 类型：Object 默认值：空对象 场景：当需要调整图表四周边距时使用

子属性详解：

• left（Number/String）：容器左侧边距，默认自动计算
• right（Number/String）：容器右侧边距，默认自动计算
• top（Number/String）：容器顶部边距，默认自动计算
• bottom（Number/String）：容器底部边距，默认自动计算

代码案例：

@State defOption: Options = new Options({
  grid: {
    left: "10%",
    right: "5%",
    top: 50,
    bottom: "15%"
  },
  // 其他配置...
})

二、color 属性

作用：定义图表数据系列的调色盘 类型：String[] 默认值：['#296DFF', '#ff5495fd', ...] 可选值：支持HEX/RGBA/HSL等颜色格式的数组 场景：需要统一管理多个数据系列颜色时使用

代码案例：

@State defOption: Options = new Options({
  color: ["#FF6B6B", "#4ECDC4", "#45B7D1"],
  series: [
    { name: "系列1", data: [...] },
    { name: "系列2", data: [...] }
  ]
})

三、title 属性

作用：配置图表标题的显示与样式 类型：Object 默认值：{ show: true, text: '', right: 0, top: 0 }

子属性详解：

• show（Boolean）：是否显示标题，默认true
• text（String）：标题文本内容
• right（Number）：标题距离右侧的像素值
• top（Number）：标题距离顶部的像素值

代码案例：

@State defOption: Options = new Options({
  title: {
    show: true,
    text: "销售数据对比",
    right: 30,
    top: 20
  }
})

四、radar 属性

作用：配置雷达图坐标系核心参数 类型：Object

子属性详解：

1. indicator（Array<{name:string,max?:number}>）：

• 定义雷达图各维度名称及其最大值
• 必填项，示例：[{name:"性能",max:100}, {name:"价格"}]

1. center（Array）：

• 雷达图圆心坐标，默认["50%","50%"]
• 支持百分比或像素值

1. radius（String/Number）：

• 雷达图半径，默认"65%"

1. splitArea（Object）：

• 区域分隔样式配置
• 示例：{ show:true, areaStyle:{ colors:["#fff","#f5f5f5"] } }

完整代码：

radar: {
  indicator: [
    { name: "用户体验", max: 100 },
    { name: "性能指标" },
    { name: "性价比" }
  ],
  center: ["45%", "55%"],
  radius: "75%",
  splitArea: {
    show: true,
    areaStyle: { colors: ["#f8f9fa", "#e9ecef"] }
  }
}

五、tooltip 属性

作用：控制数据提示框的显示与样式 类型：Object

子属性详解：

• borderColor（String）：边框颜色，默认"#333"
• backgroundColor（String）：背景色，默认"rgba(50,50,50,0.7)"
• textStyle（Object）：
• • 子属性包含color/fontSize等文本样式配置
• 代码案例：

• tooltip: {
    borderColor: "#FF6B6B",
    backgroundColor: "#ffffff",
    textStyle: {
      color: "#333",
      fontSize: 14
    }
  }

• ---

• 六、animation 属性

• 作用：控制图表动画开关 类型：Boolean 默认值：true 场景：数据频繁更新时建议关闭提升性能
• 代码示例：

• @State defOption: Options = new Options({
    animation: false  // 关闭动画
  })

• ---

• 七、series 属性

• 作用：定义数据系列的核心配置 类型：Array