大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McLineBarChart组合图组件的基础属性详细用法。本文将通过分点拆解每个属性的核心功能和使用方式，帮助开发者快速掌握该组件的定制能力。
一、grid（绘图网格）
作用：控制图表主体与容器边界的间距 类型：Object 默认：空对象{} 可选值：可设置left/right/top/bottom四个方向的数值或百分比 场景：当图表需要适应不同屏幕尺寸时，通过调整边距避免内容被遮挡 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct GridExample {
@State options: Options = new Options({
grid: {
left: 80, // 重点配置项
right: 40,
top: 100,
bottom: 40
},
xAxis: {
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
name: '产值(万元)'
},
series: [
{
name: '产量',
type: 'bar',
data: [450, 520, 480, 600]
}
]
})
build() {
Column() {
McLineBarChart({ options: this.options })
.aspectRatio(1.5)
}
.padding(16)
}
}二、color（调色盘）
作用：定义系列数据的默认配色方案 类型：String[] 默认：['#296DFF', '#ff5495fd', ...] 可选值：任意HEX/RGBA颜色值数组 场景：统一多系列图表视觉风格时使用 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct ColorExample {
@State options: Options = new Options({
color: ['#FF6B6B', '#4ECDC4'], // 重点配置项
xAxis: {
data: ['苹果', '香蕉', '橙子']
},
yAxis: {
name: '销量(吨)'
},
series: [
{
name: '线上',
type: 'bar',
data: [120, 150, 90]
},
{
name: '线下',
type: 'line',
data: [80, 110, 75]
}
]
})
build() {
Row() {
McLineBarChart({ options: this.options })
}
.height('60%')
}
}三、title（标题）
作用：配置图表主标题显示 类型：Object 默认：{show:true, text:'基础', right:20, top:22} 可选值：支持text文本、show显隐、位置坐标等 场景：需要突出图表主题时 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct TitleExample {
@State options: Options = new Options({
title: { // 重点配置项
show: true,
text: '水果季度销售报告',
subtext: '2023年度数据',
left: 'center',
textStyle: {
color: '#2c3e50',
fontSize: 20
}
},
xAxis: {
data: ['春季', '夏季', '秋季', '冬季']
},
series: [
{
name: '销售额',
type: 'bar',
data: [250, 380, 420, 310]
}
]
})
build() {
Column() {
McLineBarChart({ options: this.options })
}
.width('100%')
.height(400)
}
}四、legend（图例）
作用：控制数据系列的图例显示 类型：Object 默认：水平排列在顶部 可选值：支持位置、图标形状、选中状态等 场景：多系列数据需要分类标识时 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct LegendExample {
@State options: Options = new Options({
legend: { // 重点配置项
show: true,
orient: 'vertical',
right: 10,
top: 'middle',
icon: 'rect',
itemWidth: 16,
itemHeight: 8
},
xAxis: {
data: ['北京', '上海', '广州']
},
series: [
{
name: '用户量',
type: 'bar',
data: [5000, 7000, 4500]
},
{
name: '增长率',
type: 'line',
data: [15, 22, 18]
}
]
})
build() {
Row() {
McLineBarChart({ options: this.options })
}
.height('55%')
}
}五、tooltip（提示框）
作用：配置数据点的交互提示信息 类型：Object 默认：半透明黑色背景 可选值：可自定义边框、背景色、文本样式 场景：需要增强数据可读性时 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct TooltipExample {
@State options: Options = new Options({
tooltip: { // 重点配置项
trigger: 'axis',
backgroundColor: '#FFF3E0',
borderColor: '#FFA726',
textStyle: {
color: '#BF360C',
fontSize: 14
}
},
xAxis: {
data: ['早', '中', '晚']
},
series: [
{
name: '客流量',
type: 'line',
data: [120, 250, 180]
}
]
})
build() {
Column() {
McLineBarChart({ options: this.options })
}
.padding(20)
}
}六、xAxis（X轴）
作用：配置横坐标轴样式 类型：Object（必填） 默认：黑色轴线+等宽标签 可选值：轴线样式、标签旋转、格式化等 场景：处理长文本标签或特殊格式需求 代码案例：
css
xAxis: {
axisLabel: {
rotate: 45, // 标签倾斜45度
formatter: (name) => name.substring(0,3) // 显示前3个字符
}
}七、yAxis（Y轴）
作用：配置纵坐标轴样式 类型：Object/Array（支持多Y轴） 默认：左侧单轴 可选值：位置、刻度范围、分割线等 场景：双指标数据对比时 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct YAxisExample {
@State options: Options = new Options({
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月']
},
// 双Y轴配置
yAxis: [
{
name: '温度(℃)',
position: 'left',
axisLabel: {
formatter: '{value} °C' // 温度单位
},
splitLine: {
show: false // 隐藏左侧辅助线
}
},
{
name: '降水量(mm)',
position: 'right',
axisLabel: {
color: '#91CC75', // 绿色文字
formatter: '{value} mm'
}
}
],
series: [
{
name: '温度',
type: 'line',
yAxisIndex: 0, // 关联第一个Y轴
data: [8, 12, 18, 23, 28],
color: '#FF6B6B'
},
{
name: '降水量',
type: 'bar',
yAxisIndex: 1, // 关联第二个Y轴
data: [45, 60, 85, 70, 55],
color: '#91CC75'
}
]
})
build() {
Column() {
McLineBarChart({ options: this.options })
}
.height(400)
}
}八、dataZoom（区域缩放）
作用：实现图表数据区域缩放 类型：Object 默认：关闭状态 可选值：start/end定义初始显示范围 场景：大数据量局部聚焦分析 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct DataZoomExample {
@State options: Options = new Options({
xAxis: {
data: Array.from({length: 30}, (_,i) => `第${i+1}天`) // 生成30天数据
},
dataZoom: {
show: true,
start: 60, // 初始显示60%位置
end: 100 // 到100%位置
},
series: [
{
name: '访问量',
type: 'line',
data: Array.from({length: 30}, () => Math.floor(Math.random()*1000)), // 随机数据
smooth: true
}
]
})
build() {
Column() {
McLineBarChart({ options: this.options })
.aspectRatio(1.5)
}
.padding(20)
}
}九、animation（动画）
作用：控制图表初始化动画 类型：Boolean 默认：true（开启） 可选值：true/false 场景：需要提升性能时关闭动画 代码案例：
arduino
animation: false // 禁止初始动画十、series（数据系列）
作用：定义图表核心数据与样式 类型：Object[]（必填） 默认：无 可选值：支持line/bar类型混排 场景：组合图表的核心配置 代码案例：
less
import { McLineBarChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct SeriesExample {
@State options: Options = new Options({
xAxis: {
data: ['A产品', 'B产品', 'C产品']
},
yAxis: {
name: '销售额'
},
series: [
{
name: '线上销售',
type: 'bar',
data: [150, 230, 180],
barWidth: '30%', // 柱宽30%
itemStyle: {
color: {
type: 'linear', // 渐变效果
colorStops: [
{ offset: 0, color: '#83AFFE' },
{ offset: 1, color: '#296DFF' }
]
}
},
label: {
show: true, // 显示数值标签
position: 'top'
}
},
{
name: '目标达成率',
type: 'line',
data: [85, 95, 90],
smooth: true,
symbol: 'circle',
symbolSize: 10,
lineStyle: {
width: 3,
type: 'dotted'
}
}
]
})
build() {
Row() {
McLineBarChart({ options: this.options })
}
.height('50%')
}
}好，这期讲到这里就结束了，希望大家通过本文的系统讲解，能够熟练掌握McLineBarChart组件的各项基础属性配置。在实际开发中，建议先确定可视化需求，再按模块逐步配置对应属性，遇到特殊场景时可随时查阅本文的配置指南。下期我们将深入讲解动态数据更新和自定义样式的进阶技巧，敬请期待！