HarmonyOS鸿蒙Next 5莓创图表饼图基础属性讲解

HarmonyOS鸿蒙Next 5莓创图表饼图基础属性讲解 大家好，欢迎回来鸿蒙5莓创图表组件的专场！我们这一期来深入讲解McCharts组合图组件的基础属性用法，涵盖grid、color、title、legend、tooltip、animation、series七大核心属性。每个属性都将从作用、类型、默认值、可选值、使用场景和完整代码案例展开，助您快速掌握图表定制技巧！

一、grid属性

作用：控制图表坐标系与绘图区域的边距
类型：Object
默认值：{}（默认自适应边距）
场景：当需要固定图表四周留白或适配不同屏幕时使用

子属性详解

• left

  • 作用：图表左侧边距
  • 类型：Number | String
  • 默认："auto"（自适应）
  • 可选值：像素值（如40）或百分比（如"20%"）

• right

  • 同left，控制右侧边距

• top

  • 同left，控制顶部边距

• bottom

  • 同left，控制底部边距

代码案例：

options: new Options({
  grid: {
    left: "15%",
    right: 30,
    top: 60,
    bottom: "10%"
  },
  series: [...] // 数据系列
})

二、color属性

作用：自定义数据系列颜色
类型：String[]
默认值：['#296DFF', '#FF5495', '#1ACFFD', ...]（10种预设色）
场景：需要统一品牌色或区分多组数据时

代码案例：

options: new Options({
  color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'],
  series: [...] // 数据将按顺序应用颜色
})

三、title属性

作用：配置主标题和副标题
类型：Object
默认值：{ show: true, text: '', left: 'auto' }

子属性详解

• show

  • 作用：是否显示标题
  • 类型：Boolean
  • 默认：true

• text

  • 作用：主标题内容
  • 类型：String
  • 示例："2023销售数据"

• subtext

  • 作用：副标题内容
  • 类型：String
  • 示例："单位：万元"

• textStyle

  • 子属性：color（颜色）、fontSize（字号）、fontWeight（粗细）

代码案例：

title: {
  show: true,
  text: "季度销售趋势",
  subtext: "数据来源：财务部",
  left: "center",
  textStyle: {
    color: "#333",
    fontSize: 24,
    fontWeight: "bold"
  }
}

四、legend属性

作用：控制图例显示与样式
类型：Object
默认值：{ show: true, orient: 'horizontal' }

子属性详解

• orient

  • 作用：排列方向
  • 类型：String
  • 默认："horizontal"
  • 可选值："vertical"（垂直排列）

• itemWidth

  • 作用：图例标记宽度
  • 类型：Number
  • 默认：16

• textStyle

  • 作用：文本样式
  • 子属性：color、fontSize

代码案例：

legend: {
  show: true,
  orient: "vertical",
  left: "right",
  itemWidth: 10,
  textStyle: {
    color: "#666",
    fontSize: 14
  }
}

五、tooltip属性

作用：配置数据悬浮提示框
类型：Object
默认值：{ show: true, backgroundColor: 'rgba(50,50,50,0.7)' }

子属性详解

• trigger

  • 作用：触发方式
  • 类型：String
  • 默认："item"
  • 可选值："axis"（坐标轴触发）

• borderColor

  • 作用：边框颜色
  • 类型：String
  • 默认："#333"

代码案例：

tooltip: {
  backgroundColor: "#FFF",
  borderColor: "#FF6B6B",
  textStyle: {
    color: "#333",
    fontSize: 16
  }
}

六、animation属性

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

代码案例：

options: new Options({
  animation: false, // 关闭动画
  series: [...]
})

七、series属性（核心）

作用：配置数据系列核心参数
类型：Object[]
必填：是

子属性详解

• type

  • 作用：图表类型
  • 类型：String
  • 必填：是
  • 可选值："line"、"bar"

• smooth

  • 作用：是否平滑折线
  • 类型：Boolean
  • 默认：false

• label

  • 作用：数据标签显示
  • 子属性：
    • show（是否显示）
    • formatter（自定义内容）

完整案例：

series: [{
  type: "line",
  smooth: true,
  data: [120, 135, 165, 195],
  label: {
    show: true,
    formatter: (params) => `${params.value}万`
  }
}, {
  type: "bar",
  barWidth: "60%",
  data: [85, 110, 140, 175]
}]

综合实战案例：销售数据仪表盘

场景需求：

• 显示2023年各渠道销售额
• 主标题居中对齐
• 图例右侧垂直排列
• 显示动态更新的柱状图

完整代码：

@Entry
@Component
struct SalesDashboard {
  @State options: Options = new Options({
    grid: { left: "20%", right: "15%" },
    color: ['#FF6B6B', '#4ECDC4'],
    title: {
      show: true,
      text: "2023渠道销售分析",
      subtext: "数据实时更新",
      left: "center"
    },
    legend: {
      orient: "vertical",
      left: "right"
    },
    tooltip: {
      backgroundColor: "#FFF",
      borderColor: "#4ECDC4"
    },
    animation: true,
    series: [{
      type: "bar",
      data: [
        { value: 245, name: "线上" },
        { value: 189, name: "门店" },
        { value: 156, name: "代理" }
      ],
      label: { show: true }
    }]
  })

  // 动态更新数据
  aboutToAppear() {
    setTimeout(() => {
      this.options.setVal({
        series: [{
          data: [
            { value: 320, name: "线上" },
            { value: 275, name: "门店" },
            { value: 210, name: "代理" }
          ]
        }]
      })
    }, 3000)
  }

  build() {
    Row() {
      McLineBarChart({ options: this.options })
    }.height('100%')
  }
}

好，这期讲到这里就结束了！希望通过这期内容，大家能彻底掌握McCharts的基础属性配置技巧。建议大家在实战中多尝试不同属性的组合效果，遇到问题随时查阅官方文档。下期我们将深入讲解「高级交互与动态数据流」，敬请期待！有任何问题欢迎在评论区留言讨论~