鸿蒙5莓创图表雷达基础属性教程

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

一、grid 属性

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

子属性详解：

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

代码案例：

less 复制代码

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

二、color 属性

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

代码案例：

less 复制代码

@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）：标题距离顶部的像素值

代码案例：

less 复制代码

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

四、radar 属性

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

子属性详解：

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

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

center（Array）：

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

radius（String/Number）：

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

splitArea（Object）：

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

完整代码：

css 复制代码

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等文本样式配置
代码案例：

css 复制代码

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

六、animation 属性

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

less 复制代码

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

七、series 属性

作用：定义数据系列的核心配置类型：Array 必填：是
子属性详解：
1. name（String）：系列名称，用于图例显示
2. data（Array）：数据点集合，必填
3. areaStyle（Object）：
- 控制填充区域样式，如{color:["#4ECDC4","#45B7D1"]}
完整代码：

yaml 复制代码

series: [{
  name: "华为产品",
  data: [85, 90, 88, 93, 80],
  areaStyle: {
    show: true,
    color: ["#4ECDC4", "#45B7D1"]
  }
}]

实际案例拓展：产品竞争力分析图

场景：对比三款手机在六个维度的性能表现

less 复制代码

@State defOption: Options = new Options({
  title: {
    text: "手机竞争力分析",
    top: 10
  },
  radar: {
    indicator: [
      { name: "续航", max: 100 },
      { name: "屏幕" },
      { name: "摄影" },
      { name: "系统" },
      { name: "散热" },
      { name: "价格" }
    ],
    splitArea: { show: false }
  },
  series: [
    {
      name: "Mate60",
      data: [95, 92, 98, 85, 88, 75],
      areaStyle: { color: ["#296DFF", "#7B72F7"] }
    },
    {
      name: "iPhone15",
      data: [80, 95, 85, 90, 80, 60]
    }
  ]
})

该配置实现：
1. 隐藏分隔区域突出数据线条
2. 使用渐变色填充旗舰机型
3. 通过max属性规范评分维度

好，这期讲到这里就结束了，希望大家能通过本文全面掌握McRadarChart的核心配置技巧。如果遇到实现问题，欢迎在评论区留言交流。记得点赞关注，我们下期再见！