首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >鸿蒙5莓创仪表盘图表组件属性用法解析

鸿蒙5莓创仪表盘图表组件属性用法解析

原创
作者头像
陈杨
发布2025-06-25 11:12:21
发布2025-06-25 11:12:21
1100
举报

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


一、grid属性

作用:控制图表与容器边界的间距,替代旧版cPadding系列属性,实现更灵活的布局控制。 类型:Object 默认值:{}(空对象,表示不主动设置边距) 子属性:

  • left:左间距(Number/百分比字符串,如20'10%'
  • right:右间距(Number/百分比字符串)
  • top:上间距(Number/百分比字符串)
  • bottom:下间距(Number/百分比字符串) 适用场景:当图表需要自适应不同屏幕尺寸或避免内容溢出时。

完整代码案例:

代码语言:txt
复制
@State defOption: Options = new Options({
  grid: {
    left: '15%',
    right: '10%',
    top: 50,
    bottom: 30
  },
  series: [{ data: [{ name: '鸿蒙', value: 90 }] }]
})

二、color属性

作用:全局调色盘,定义仪表盘弧线颜色的备选列表。 类型:String[] 默认值:['#296DFF', '#ff5495fd', ...] 可选值:任意HEX颜色码数组。 场景:需要统一管理多个数据项颜色或自定义主题色时。

代码案例:

代码语言:txt
复制
@State defOption: Options = new Options({
  color: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
  series: [{ data: [{ name: '鸿蒙', value: 90 }] }]
})

三、title属性

作用:配置图表标题的显示位置、内容及样式。 类型:Object 默认值:

代码语言:txt
复制
{
  show: true,
  text: '',
  right: 'auto',
  top: 'auto'
}

子属性详解:

  1. show(Boolean):是否显示标题,默认true
  2. text(String):标题文本内容,默认空。
  3. right/top(Number/String):标题位置偏移量,支持数值或百分比。 场景:需展示图表主题或说明时。

代码案例:

代码语言:txt
复制
@State defOption: Options = new Options({
  title: {
    show: true,
    text: '系统性能监控',
    right: 20,
    top: '10%'
  },
  series: [{ data: [{ name: 'CPU', value: 75 }] }]
})

四、animation属性

作用:控制图表是否启用加载动画。 类型:Boolean 默认值:true 可选值:true(开启动画)/false(关闭) 场景:数据频繁更新时建议关闭以提升性能。

代码案例:

代码语言:txt
复制
@State defOption: Options = new Options({
  animation: false, // 关闭动画
  series: [{ data: [{ name: '实时数据', value: 60 }] }]
})

五、series属性(核心配置)

作用:定义仪表盘的核心样式、数据及交互行为。 类型:Object[] 默认值:[ { data: [] } ] 子属性详解:

1. show
  • 作用:是否显示该系列仪表盘。
  • 类型:Boolean
  • 默认:true
  • 场景:动态切换多个仪表盘显示状态时。
2. name
  • 作用:图例名称,用于多系列区分。
  • 类型:String
  • 默认:空字符串
  • 场景:结合图例组件展示多组数据时。
3. radius
  • 作用:仪表盘半径,支持百分比或数值。
  • 类型:String/Number
  • 默认:'60%'
  • 示例:radius: '80%'radius: 120
4. center
  • 作用:仪表盘中心点坐标。
  • 类型:Array
  • 默认:['50%', '50%'](居中)
  • 示例:center: ['40%', '60%']
5. startAngle/endAngle
  • 作用:定义弧形的起始和结束角度(弧度制)。
  • 类型:Number
  • 默认:startAngle: -Math.PI*5/4, endAngle: Math.PI/4
  • 场景:自定义弧形范围,如半圆形或全环形。
6. data
  • 作用:数据项数组,支持多组嵌套仪表盘。
  • 类型:Object[]
  • 子属性:
    • name(String):数据名称
    • value(Number):当前值
    • gradient(String[]):自定义渐变色数组
  • 完整代码案例:
  • @State defOption: Options = new Options({ series: [{ name: '核心指标', radius: '70%', center: ['50%', '60%'], startAngle: -Math.PI/2, endAngle: Math.PI*1.5, data: [ { name: '负载率', value: 85, gradient: ['#FF6B6B', '#FF8E53'] }, { name: '空闲率', value: 15, radius: '50%' } ] }] })
  • undefined
  • 实际案例:服务器监控仪表盘
  • 需求:展示CPU、内存、磁盘的三层环形仪表盘,关闭动画,自定义标题和颜色。
  • @State defOption: Options = new Options({ title: { show: true, text: '服务器状态', top: 20, right: 'center' }, color: ['#FF6B6B', '#4ECDC4', '#45B7D1'], animation: false, series: [{ arcLineWidth: 20, startAngle: -Math.PI/2, endAngle: Math.PI*1.5, data: [ { name: 'CPU', value: 90, radius: '80%', gradient: ['#FF6B6B', '#FF8E53'] }, { name: '内存', value: 65, radius: '60%', gradient: ['#4ECDC4', '#45B7D1'] }, { name: '磁盘', value: 45, radius: '40%', gradient: ['#96F2D7', '#63E6BE'] } ], axisTick: { show: false }, pointer: { show: false }, details: { show: true, formatter: (dataItem) => `${dataItem.name}: ${dataItem.value}%`, style: { fontSize: 18 } } }] })
  • undefined
  • 好,这期讲到这里就结束了,希望大家通过本文能全面掌握McGaugeChart的基础属性配置方法。在实际开发中,可灵活组合属性实现复杂的监控界面或数据可视化大屏。下期我们将深入讲解动态数据更新与交互事件,敬请期待!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、grid属性
  • 二、color属性
  • 三、title属性
  • 四、animation属性
  • 五、series属性(核心配置)
    • 1. show
    • 2. name
    • 3. radius
    • 4. center
    • 5. startAngle/endAngle
    • 6. data
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档