大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McLineChart折线图组件的tooltip属性详细用法。
tooltip基础属性详解
show属性
作用：控制是否显示提示框组件
类型：Boolean
默认值：true
可选值：true/false
场景：当需要完全禁用提示框功能时设置为false
代码示例：
@State seriesOption: Options = new Options({
tooltip: {
show: false // 禁用提示框
},
// 其他配置...
})padding属性
作用：设置提示框内边距
类型：Number
默认值：10
可选值：任意正数
场景：当提示框内容较多需要更多空间时增加此值
代码示例：
@State seriesOption: Options = new Options({
tooltip: {
padding: 15 // 增加内边距
},
// 其他配置...
})backgroundColor属性
作用：设置提示框背景颜色
类型：String
默认值：'rgba(0,0,0,0.7)'
可选值：任何合法的CSS颜色值
场景：需要调整提示框背景透明度或颜色时使用
代码示例：
@State seriesOption: Options = new Options({
tooltip: {
backgroundColor: 'rgba(50,50,50,0.8)' // 深灰色半透明背景
},
// 其他配置...
})borderWidth属性
作用：设置提示框边框宽度
类型：Number
默认值：0
可选值：任意正数
场景：需要为提示框添加边框时使用
代码示例：
@State seriesOption: Options = new Options({
tooltip: {
borderWidth: 1 // 添加1px边框
},
// 其他配置...
})borderColor属性
作用：设置提示框边框颜色
类型：String
默认值：'rgba(0,0,0,0.7)'
可选值：任何合法的CSS颜色值
场景：需要自定义提示框边框颜色时使用
代码示例：
@State seriesOption: Options = new Options({
tooltip: {
borderWidth: 1,
borderColor: '#409EFF' // 蓝色边框
},
// 其他配置...
})axisPointer指示器配置
type属性
作用：设置指示器类型
类型：String
默认值：'line'
可选值：'line'/'shadow'
场景：'line'显示为直线指示器，'shadow'显示为阴影区域
代码示例：
@State seriesOption: Options = new Options({
tooltip: {
axisPointer: {
type: 'shadow' // 使用阴影指示器
}
},
// 其他配置...
})lineStyle配置对象
作用：当type为'line'时的线条样式配置
width属性
作用：设置指示线宽度
类型：Number
默认值：1
可选值：任意正数
场景：需要加粗或减细指示线时使用
type属性
作用：设置指示线类型
类型：String
默认值：'solid'
可选值：'solid'/'dashed'/'dotted'
场景：需要虚线或点线效果时使用
color属性
作用：设置指示线颜色
类型：String
默认值：'#DDE2EB'
可选值：任何合法的CSS颜色值
场景：需要自定义指示线颜色时使用
完整代码示例：
@State seriesOption: Options = new Options({
tooltip: {
axisPointer: {
type: 'line',
lineStyle: {
width: 2,
type: 'dashed',
color: '#FF0000'
}
}
},
// 其他配置...
})shadowStyle配置对象
作用：当type为'shadow'时的阴影样式配置
color属性
作用：设置阴影颜色
类型：String
默认值：'rgba(150,150,150,0.2)'
可选值：任何合法的CSS颜色值
场景：需要调整阴影颜色和透明度时使用
borderWidth属性
作用：设置阴影边框宽度
类型：Number
默认值：0
可选值：任意正数
场景：需要为阴影添加边框时使用
borderColor属性
作用：设置阴影边框颜色
类型：String
默认值：'rgba(150,150,150,0.2)'
可选值：任何合法的CSS颜色值
场景：需要自定义阴影边框颜色时使用
完整代码示例：
@State seriesOption: Options = new Options({
tooltip: {
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(100,100,100,0.3)',
borderWidth: 1,
borderColor: '#409EFF'
}
}
},
// 其他配置...
})textStyle文本样式配置
color属性
作用：设置提示框文字颜色
类型：String
默认值：'#fff'
可选值：任何合法的CSS颜色值
场景：需要调整提示文字颜色时使用
fontWeight属性
作用：设置提示框文字粗细
类型：String
默认值：'normal'
可选值：'normal'/'bold'/'lighter'/'bolder'或100-900
场景：需要加粗或减细提示文字时使用
fontFamily属性
作用：设置提示框字体
类型：String
默认值：'sans-serif'
可选值：任何系统支持的字体
场景：需要自定义提示框字体时使用
fontSize属性
作用：设置提示框文字大小
类型：Number
默认值：14
可选值：任意正数
场景：需要调整提示文字大小时使用
完整代码示例：
@State seriesOption: Options = new Options({
tooltip: {
textStyle: {
color: '#333',
fontWeight: 'bold',
fontFamily: 'Arial',
fontSize: 16
}
},
// 其他配置...
})动画相关配置
animationCurve属性
作用：设置提示框显示/隐藏的动画曲线
类型：String
默认值：'easeOutCubic'
可选值：'linear'/'easeIn'/'easeOut'/'easeInOut'等CSS动画曲线
场景：需要自定义提示框动画效果时使用
animationFrame属性
作用：设置提示框动画时长
类型：Number
默认值：0
可选值：任意正数
场景：需要调整提示框动画速度时使用
完整代码示例：
@State seriesOption: Options = new Options({
tooltip: {
animationCurve: 'easeInOut',
animationFrame: 300 // 300ms动画时长
},
// 其他配置...
})自定义提示层
除了使用内置的提示框样式，莓创图表还支持完全自定义提示框内容：
import { McLineChart, Options, chartInterface } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State tooltipOption: Options = new Options({
xAxis: {
data: ['周一','周二','周三','周四','周五','周六','周日']
},
series: [
{
name: '最高气温',
data: [11, 11, 15, 13, 12, 130, 10]
},
{
name: '最低气温',
data: [1, -20, 2, 5, 3, 2, 0]
}
]
})
@Builder
customTooltip($$: chartInterface.InterfaceObj) {
// 自定义提示框容器样式
Column() {
// 显示当前X轴值作为标题
if ($$.tooltipInfo.title) {
Text($$.tooltipInfo.title)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 8 })
}
// 遍历显示所有系列的数据
ForEach($$.tooltipInfo.data, (item: chartInterface.InterfaceObj, index: number) => {
Row() {
// 显示系列名称和颜色标记
Circle({ width: 10, height: 10 })
.fill(item.color)
.margin({ right: 8 })
Text(item.name + ': ')
.fontSize(14)
Text(item.num.toString())
.fontSize(14)
.fontColor('#409EFF')
}
.margin({ top: 4, bottom: 4 })
})
}
.padding(12)
.backgroundColor('#FFFFFF')
.borderRadius(8)
.shadow({ radius: 8, color: '#888888', offsetX: 2, offsetY: 2 })
}
build() {
Row() {
McLineChart({
options: this.tooltipOption,
customTooltip: this.customTooltip
})
}
.height('50%')
}
}实际应用案例
下面是一个完整的实际应用案例，展示了如何综合使用各种tooltip属性：
import { McLineChart, Options } from '@mcui/mccharts'
@Entry
@Component
struct Index {
@State maxData: number[] = [11, 11, 15, 13, 12, 130, 10]
@State minData: number[] = [1, -20, 2, 5, 3, 2, 0]
@State seriesOption: Options = new Options({
tooltip: {
show: true,
padding: 12,
backgroundColor: 'rgba(50,50,80,0.85)',
borderWidth: 1,
borderColor: '#409EFF',
axisPointer: {
type: 'line',
lineStyle: {
width: 2,
type: 'dashed',
color: '#409EFF'
}
},
textStyle: {
color: '#FFFFFF',
fontWeight: 'normal',
fontFamily: 'Arial',
fontSize: 14
},
animationCurve: 'easeOutCubic',
animationFrame: 200
},
xAxis: {
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
name: '温度(℃)'
},
series: [
{
name: '最高气温',
data: this.maxData
},
{
name: '最低气温',
data: this.minData
}
]
})
aboutToAppear() {
setTimeout(() => {
this.maxData = [110, 110, 150, 130, 120, 190, 100]
this.minData = [-1, -2, -2, -5, 3, -2, 0]
this.seriesOption.setVal({
series: [
{
name: '最高气温',
data: this.maxData
},
{
name: '最低气温',
data: this.minData
}
]
})
}, 2000)
}
build() {
Row() {
McLineChart({
options: this.seriesOption
})
}
.height('50%')
}
}好，这期讲到这里就结束了，希望大家通过这篇文章能够全面掌握莓创图表折线图组件的tooltip属性配置方法。在实际项目中，可以根据需求灵活组合这些属性，创建出既美观又实用的数据提示效果。如果有任何问题，欢迎在评论区留言讨论！
