鸿蒙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

子属性详解:

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

完整代码:

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的核心配置技巧。如果遇到实现问题,欢迎在评论区留言交流。记得点赞关注,我们下期再见!
相关推荐
做运维的阿瑞21 分钟前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
Dontla2 小时前
Tailwind CSS介绍(现代CSS框架,与传统CSS框架Bootstrap对比)Tailwind介绍
前端·css·bootstrap
yinuo2 小时前
uniapp微信小程序安卓手机Touchend事件无法触发
前端
你的人类朋友4 小时前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程4 小时前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery
excel5 小时前
前端读取文件夹并通过 SSH 上传:完整实现方案 ✅
前端
双向335 小时前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端
Lei活在当下5 小时前
【业务场景架构实战】6. 从业务痛点到通用能力:Android 优先级分页加载器设计
前端·后端·架构
你的人类朋友5 小时前
什么是基础设施中间件
前端·后端
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发