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

---

一、grid属性

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

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

完整代码案例：

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

---

二、color属性

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

代码案例：

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

---

三、title属性

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

{
  show: true,
  text: '',
  right: 'auto',
  top: 'auto'
}

子属性详解：

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

代码案例：

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

---

四、animation属性

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

代码案例：

@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%' }
      ]
    }]
  })

• ---

• 实际案例：服务器监控仪表盘

• 需求：展示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 }
      }
    }]
  })

• ---

• 好，这期讲到这里就结束了，希望大家通过本文能全面掌握McGaugeChart的基础属性配置方法。在实际开发中，可灵活组合属性实现复杂的监控界面或数据可视化大屏。下期我们将深入讲解动态数据更新与交互事件，敬请期待！