鸿蒙5莓创折线与柱状图组合图表属性用法详解

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McLineBarChart组合图组件的基础属性详解。本篇将深度拆解每个属性的用法场景，通过完整代码案例帮助开发者快速掌握核心配置技巧。

一、grid属性（网格布局）

作用：控制图表内容与容器的边距类型：Object 默认值：{left: '10%', right: '10%', top: '15%', bottom: '10%'} 配置场景：当需要调整图表主体与容器边缘间距时使用

子属性详解：

left/right/top/bottom 类型：Number | String（百分比或像素值）默认：自适应场景：需要精确控制图表位置时，如手机端适配场景

grid: {
  left: '15%',  // 左侧留空15%容器宽度
  top: 100       // 顶部固定100像素间距
}

二、color属性（主题色）

作用：定义数据系列颜色序列类型：String[] 默认值：['#296DFF', '#ff5495fd', ...] 可选值：支持HEX/RGB/RGBA格式场景：需要统一图表视觉风格时

color: ['#FF6B6B', '#4ECDC4']  // 红绿配色方案

三、title属性（标题配置）

作用：配置图表主标题类型：Object 默认显示：隐藏状态

子属性详解：

show 类型：Boolean 默认：false 作用：控制标题显示/隐藏
text 类型：String 默认：空场景：设置标题文字内容
textStyle 类型：Object 默认：{color: '#333', fontSize: 18} 子属性：color/fontSize/fontWeight等文本样式

title: {
  show: true,
  text: '2024销售趋势',
  textStyle: {
    color: '#2c3e50',
    fontSize: 22
  }
}

四、legend属性（图例配置）

作用：控制数据系列的显示开关类型：Object 核心子属性：

orient 类型：String 默认：'horizontal' 可选值：horizontal（水平） | vertical（垂直）
itemWidth 类型：Number 默认：16 作用：设置图例标记宽度
selectedMode 类型：Boolean 默认：true 场景：控制是否允许点击图例切换系列显示

legend: {
  orient: 'vertical',
  left: 'right',
  itemHeight: 14,
  selectedMode: false  // 禁用点击切换
}

五、tooltip属性（提示框）

作用：配置数据点悬浮提示类型：Object 高阶用法：

formatter 类型：Function 场景：自定义提示内容格式
backgroundColor 类型：String 默认：'rgba(50,50,50,0.7)' 适配场景：深色背景需要调整文字颜色

tooltip: {
  formatter: (params) => {
    return `${params.name}
销量：${params.value}件`
  },
  backgroundColor: '#FFF3E0'
}

六、xAxis属性（X轴）

作用：配置横轴显示必填属性：data 核心子属性：

axisLabel.rotate 类型：Number 默认：0 场景：长文本标签倾斜显示
boundaryGap 类型：Boolean 默认：true 作用：控制坐标轴两端留白策略

xAxis: {
  data: ['Q1','Q2','Q3','Q4'],
  axisLabel: {
    rotate: 45,
    color: '#666'
  },
  boundaryGap: false  // 不留白
}

七、yAxis属性（Y轴）

作用：配置纵轴显示进阶用法：

splitLine.show 类型：Boolean 默认：true 场景：隐藏辅助线提升简洁度
min/max 类型：Number 作用：固定坐标范围

yAxis: [{
  name: '销售额(万)',
  min: 0,
  max: 100,
  splitLine: { show: false }
},{
  name: '增长率%',
  position: 'right'
}]

八、dataZoom（区域缩放）

作用：实现数据窗口缩放核心参数：

start 类型：Number 默认：0 作用：初始窗口起点（百分比）
end 类型：Number 默认：100 场景：大数据量展示局部细节

dataZoom: {
  show: true,
  start: 30,
  end: 70  // 显示中间40%数据
}

九、animation（动画）

作用：控制图表初始渲染动画类型：Boolean 默认：true 场景：大数据量时关闭提升性能

animation: false  // 禁用初始动画

十、series（数据系列）

核心配置项：

type 类型：String 必填可选值：'line' | 'bar'
smooth 类型：Boolean 默认：false 作用：折线平滑显示
stack 类型：String 场景：实现堆叠柱状图

完整案例：

series: [{
  name: '线上销量',
  type: 'bar',
  stack: '总量',
  data: [120, 135, 165, 210]
},{
  name: '线下销量',
  type: 'bar',
  stack: '总量',
  data: [80, 95, 120, 150]
},{
  name: '增长率',
  type: 'line',
  smooth: true,
  yAxisIndex: 1
}]

实战案例：电商数据看板

结合多属性实现电商销售可视化：

Options({
  grid: { top: 100 },
  color: ['#FF9F40', '#36A2EB'],
  title: {
    show: true,
    text: '双渠道销售看板'
  },
  xAxis: {
    data: ['手机','电脑','家电','服饰'],
    axisLabel: { rotate: 30 }
  },
  yAxis: [{
    name: '销量(件)'
  },{
    name: '环比增长',
    position: 'right'
  }],
  series: [{
    type: 'bar',
    name: '线上',
    stack: '总量'
  },{
    type: 'bar',
    name: '线下',
    stack: '总量'
  },{
    type: 'line',
    name: '增长率',
    yAxisIndex: 1
  }]
})

好，这期讲到这里就结束了，希望大家通过本文能系统掌握McLineBarChart的核心配置技巧。建议大家在实践中多尝试属性组合，遇到问题可以查阅莓创官方文档或社区案例。下期我们将深入讲解事件交互与动态更新，敬请期待！