首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >鸿蒙5莓创折线与柱状图组合图表属性用法详解

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

原创
作者头像
陈杨
发布2025-06-25 10:54:17
发布2025-06-25 10:54:17
1220
举报

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


一、grid属性(网格布局)

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

子属性详解:

  • left/right/top/bottom 类型:Number | String(百分比或像素值) 默认:自适应 场景:需要精确控制图表位置时,如手机端适配场景
代码语言:txt
复制
grid: {
  left: '15%',  // 左侧留空15%容器宽度
  top: 100       // 顶部固定100像素间距
}

二、color属性(主题色)

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

代码语言:txt
复制
color: ['#FF6B6B', '#4ECDC4']  // 红绿配色方案
```

三、title属性(标题配置)

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

子属性详解:

  • show 类型:Boolean 默认:false 作用:控制标题显示/隐藏
  • text 类型:String 默认:空 场景:设置标题文字内容
  • textStyle 类型:Object 默认:{color: '#333', fontSize: 18} 子属性:color/fontSize/fontWeight等文本样式
代码语言:txt
复制
title: {
  show: true,
  text: '2024销售趋势',
  textStyle: {
    color: '#2c3e50',
    fontSize: 22
  }
}
```

四、legend属性(图例配置)

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

  • orient 类型:String 默认:'horizontal' 可选值:horizontal(水平) | vertical(垂直)
  • itemWidth 类型:Number 默认:16 作用:设置图例标记宽度
  • selectedMode 类型:Boolean 默认:true 场景:控制是否允许点击图例切换系列显示
代码语言:txt
复制
legend: {
  orient: 'vertical',
  left: 'right',
  itemHeight: 14,
  selectedMode: false  // 禁用点击切换
}
```

五、tooltip属性(提示框)

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

  • formatter 类型:Function 场景:自定义提示内容格式
  • backgroundColor 类型:String 默认:'rgba(50,50,50,0.7)' 适配场景:深色背景需要调整文字颜色
代码语言:txt
复制
tooltip: {
  formatter: (params) => {
    return `${params.name}
销量:${params.value}件`
  },
  backgroundColor: '#FFF3E0'
}
```

六、xAxis属性(X轴)

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

  • axisLabel.rotate 类型:Number 默认:0 场景:长文本标签倾斜显示
  • boundaryGap 类型:Boolean 默认:true 作用:控制坐标轴两端留白策略
代码语言:txt
复制
xAxis: {
  data: ['Q1','Q2','Q3','Q4'],
  axisLabel: {
    rotate: 45,
    color: '#666'
  },
  boundaryGap: false  // 不留白
}
```

七、yAxis属性(Y轴)

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

  • splitLine.show 类型:Boolean 默认:true 场景:隐藏辅助线提升简洁度
  • min/max 类型:Number 作用:固定坐标范围
代码语言:txt
复制
yAxis: [{
  name: '销售额(万)',
  min: 0,
  max: 100,
  splitLine: { show: false }
},{
  name: '增长率%',
  position: 'right'
}]
```

八、dataZoom(区域缩放)

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

  • start 类型:Number 默认:0 作用:初始窗口起点(百分比)
  • end 类型:Number 默认:100 场景:大数据量展示局部细节
代码语言:txt
复制
dataZoom: {
  show: true,
  start: 30,
  end: 70  // 显示中间40%数据
}
```

九、animation(动画)

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

代码语言:txt
复制
animation: false  // 禁用初始动画
```

十、series(数据系列)

核心配置项:

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

完整案例:

代码语言:txt
复制
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
}]
```

实战案例:电商数据看板

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

代码语言:txt
复制
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的核心配置技巧。建议大家在实践中多尝试属性组合,遇到问题可以查阅莓创官方文档或社区案例。下期我们将深入讲解事件交互与动态更新,敬请期待!

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、grid属性(网格布局)
  • 二、color属性(主题色)
  • 三、title属性(标题配置)
  • 四、legend属性(图例配置)
  • 五、tooltip属性(提示框)
  • 六、xAxis属性(X轴)
  • 七、yAxis属性(Y轴)
  • 八、dataZoom(区域缩放)
  • 九、animation(动画)
  • 十、series(数据系列)
  • 实战案例:电商数据看板
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档