鸿蒙5横向柱状图基础属性详解

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解横向柱状图（McHorBarChart）基础属性的详细用法。本文将全面解析每个配置项的作用、类型、默认值、可选值和使用场景，并通过完整代码案例帮助您快速掌握。

一、grid 网格布局

作用：控制图表绘图区域与容器边缘的间距类型：Object 默认值：{} 场景：当需要精细化控制图表四周边距时使用，替代旧版cPadding系列属性

子属性详解：

left：左侧间距（Number | String，默认auto）
right：右侧间距（Number | String，默认auto）
top：顶部间距（Number | String，默认auto）
bottom：底部间距（Number | String，默认auto）

代码案例：

less 复制代码

grid: {
  left: 50,
  right: '20%',
  top: 30,
  bottom: 40
}

二、color 调色盘

作用：定义数据系列的颜色序列类型：String[] 默认值：['#296DFF', '#ff5495fd', ...] 可选值：支持HEX、RGB、RGBA等颜色格式场景：需要统一管理多系列配色时

代码案例：

css 复制代码

color: ['#FF6B6B', '#4ECDC4', '#45B7D1']

三、title 标题配置

作用：设置图表主标题样式与位置类型：Object 默认值：{ show: true, text: '', right: 20, top: 30 }

子属性详解：

show：显示开关（Boolean，默认true）
text：标题内容（String）
left/right/top/bottom：定位（Number | String）
textStyle：文本样式对象
- color：文字颜色（String）
- fontSize：字号（Number）
- fontWeight：字重（'normal' | 'bold'）
场景：需突出显示图表主题时
代码案例：

yaml 复制代码

title: {
  show: true,
  text: '月度销售统计',
  left: 'center',
  textStyle: {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold'
  }
}

四、xAxis X轴配置（核心）

作用：控制X轴样式与数据类型：Object 必填：是

关键子属性：

1. axisLine 轴线样式
- show：显示开关（Boolean）
- lineStyle：线样式对象

css 复制代码

lineStyle: { 
  color: '#666', 
  width: 2 
}

1. axisLabel 标签样式
- color：文字颜色
- fontSize：字号
- formatter：自定义格式化函数

javascript 复制代码

formatter: (name, index) => `${name}日`

1. data：数据源（必填）
场景：需要定制X轴样式或处理长文本时
完整案例：

css 复制代码

xAxis: {
  axisLine: {
    show: true,
    lineStyle: { color: '#999', width: 1 }
  },
  axisLabel: {
    color: '#666',
    fontSize: 12,
    overflow: 'truncate'
  },
  data: ['北京', '上海', '广州', '深圳']
}

五、series 数据系列（核心）

作用：定义数据系列样式与行为类型：Object[] 必填：是

关键配置项：

- barStyle 柱状样式

less 复制代码

barStyle: {
  width: 15,        // 柱宽
  borderRadius: [0, 8, 8, 0]  // 圆角
}

- gradient 渐变配置

css 复制代码

gradient: {
  color: ['#FF9A9E', '#FAD0C4']
}

- label 数据标签

yaml 复制代码

label: {
  show: true,
  color: '#FFF',
  position: 'right',
  fontSize: 14
}

完整案例：

css 复制代码

series: [{
  name: '线上销量',
  data: [235, 401, 288, 399],
  barStyle: {
    width: 20,
    borderRadius: 8
  },
  gradient: {
    color: ['#6A11CB', '#2575FC']
  }
}]

六、综合案例：销售数据看板

less 复制代码

@Entry
@Component
struct SalesDashboard {
  @State options: Options = new Options({
    title: {
      show: true,
      text: '2023 Q3区域销售',
      left: 'center',
      textStyle: { fontSize: 20 }
    },
    xAxis: {
      data: ['华北', '华东', '华南', '华中'],
      axisLabel: { 
        fontSize: 14,
        color: '#666'
      }
    },
    yAxis: {
      name: '销售额（万元）',
      nameTextStyle: { color: '#333' }
    },
    series: [{
      name: '实际销售额',
      data: [450, 680, 520, 410],
      barStyle: {
        width: 25,
        borderRadius: 12
      },
      gradient: {
        color: ['#36D1DC', '#5B86E5']
      },
      label: {
        show: true,
        color: '#FFF',
        position: 'right'
      }
    }]
  })

  build() {
    Row() {
      McHorBarChart({ options: this.options })
    }.height('60%')
  }
}

结语

好，这期讲到这里就结束了，希望大家通过本文能够全面掌握McHorBarChart的基础属性配置。在实际开发中，建议先规划好可视化需求，再逐步调试各配置项参数。遇到问题欢迎在评论区留言，我们下期将深入讲解交互扩展功能！