大家好，欢迎回来鸿蒙5莓创图表组件的专场，很多小伙伴都不知道每个图表类型中的属性到底是干嘛的，怎么用。所以我们将详细去讲解每个属性，跟我一起学习吧。
我们这一期来讲解McLineChart折线图组件中title属性的详细用法。这个属性控制着图表的标题显示，包含主副标题的样式、位置、动画等丰富配置。下面我们将逐个属性进行深度解析，并提供完整代码示例。
1. show属性
作用：控制标题是否显示
类型：Boolean
默认值：true
可选值：true | false
场景：当需要动态切换标题显示状态时使用
title: {
show: false // 隐藏标题
}
2. text属性
作用：设置主标题文本内容
类型：String
默认值：''（空字符串）
场景：展示图表的核心说明文字
title: {
text: '2023年销售趋势' // 主标题内容
}
3. subtext属性
作用：设置副标题文本内容
类型：String
默认值：''（空字符串）
场景：补充说明或数据单位标注
title: {
subtext: '单位：万元' // 副标题内容
}
4. direction属性
作用：控制主副标题排列方向
类型：String
默认值：'column'（垂直排列）
可选值：'column' | 'row'
场景：需要横向并排显示主副标题时
title: {
direction: 'row' // 水平排列
}
5. itemGap属性
作用：设置主副标题间距
类型：Number
默认值：5
场景：调整标题之间的紧凑程度
title: {
itemGap: 10 // 增大间距
}
6. 位置控制属性组
包含left/right/top/bottom四个子属性：
- 作用：控制标题容器的定位
- 类型：String | Number
- 默认值：'auto'
- 示例值：'10%' | 20（像素值）
- 场景：需要精确定位标题时使用
title: {
left: '20%', // 距离左侧20%宽度
top: 10 // 距离顶部10像素
}
7. offset属性
作用：设置标题的像素偏移量 类型：Array 默认值：[0, -20] 格式：[水平偏移, 垂直偏移] 场景：微调标题位置
title: {
offset: [10, 30] // 向右10px，向下30px
}
8. textStyle属性（对象）
控制主标题文本样式，包含以下子属性：
- color：文字颜色（String，默认'#333'）
- fontSize：字号（Number，默认36）
- fontWeight：字重（String，默认'bold'）
- fontFamily：字体（String，默认'sans-serif'）
- textAlign：水平对齐（String，默认'center'）
- textBaseline：垂直对齐（String，默认'bottom'）
title: {
textStyle: {
color: '#1890FF',
fontSize: 24,
fontWeight: 'normal'
}
}
9. subtextStyle属性（对象）
控制副标题文本样式，子属性同textStyle，区别在于：
- color默认'red'
- fontSize默认28
- fontWeight默认'400'
title: {
subtextStyle: {
color: '#666',
fontSize: 16
}
}
10. rLevel属性
作用：设置渲染层级
类型：Number
默认值：20
场景：需要控制标题与其他元素的遮盖关系时
title: {
rLevel: 100 // 提高渲染层级
}
11. animationCurve属性
作用：设置标题显示动画曲线
类型：String
默认值：'easeOutCubic'
可选值：所有CSS动画曲线值
title: {
animationCurve: 'linear' // 线性动画
}
12. animationFrame属性
作用：设置动画帧数
类型：Number
默认值：30
特殊值：0表示关闭动画
title: {
animationFrame: 50 // 更流畅的动画
}
综合应用案例
每个属性的作用、类型、默认值、可选值、场景等都讲解完毕，接下来我们看看整体的综合示例
import { McLineChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State maxData: number[] = [11, 11, 15, 13, 12, 130, 10]
// 初始化数据
@State seriesOption: Options = new Options({
title: {
show: true,
text: '气温数据',
subtext: '2023年1-4月',
direction: 'row',
itemGap: 15,
left: 'center',
top: 20,
textStyle: {
color: '#1E88E5',
fontSize: 28,
fontFamily: 'Microsoft YaHei'
},
subtextStyle: {
color: '#757575',
fontSize: 16
},
animationCurve: 'easeInOutBack'
},
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
series:[
{
name:'最高气温',
data: this.maxData
}
]
})
// 动态修改数据
aboutToAppear() {
setTimeout(() => {
// 传递需要修改的属性与数值，不需要全部传
}, 2000)
}
build() {
Row() {
McLineChart({
options: this.seriesOption
})
}
.height('50%')
}
}
实际场景拓展
在电商数据看板中，可以通过动态修改title.text实现：
// 根据筛选条件更新标题
function updateTitle(month) {
this.maxData = [110, 110, 150, 130, 120, 190, 100]
this.minData = [-1, -2, -2, -5, 3, -2, 0]
this.seriesOption.setVal({
title: {
text: `${month}月气温数据`,
subtext: `同比${data.growthRate}%`
},
series:[
{
name:'最高气温',
data: this.maxData
},
{
name:'最低气温',
data: this.minData
}
]
})
}
好，这期讲到这里就结束了，希望大家通过本文能全面掌握McLineChart标题组件的使用技巧，在实际开发中灵活运用这些属性打造专业级数据可视化效果。我们下期再见！
