鸿蒙5莓创图表组件折线类型的属性讲解-tooltip

陈杨
• 阅读 2

大家好，欢迎回来鸿蒙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属性配置方法。在实际项目中，可以根据需求灵活组合这些属性，创建出既美观又实用的数据提示效果。如果有任何问题，欢迎在评论区留言讨论！

鸿蒙开发前端开发
点赞
收藏
评论区
推荐文章
陈杨 陈杨
•
8小时前
鸿蒙5莓创横向折线与柱状图tooltips属性详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McLineBarChart组合图中非常重要的tooltip（提示框）属性的详细用法。一、tooltip基础介绍tooltip是图表中非常重要的交互元素，当用户悬停在数据点上时，会显示该点的详细信息
4
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创横向柱状图tooltip属性详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解横向柱状图(McHorBarChart)中tooltip属性的详细用法。tooltip是图表中非常重要的交互组件，它能够在用户悬停或点击时显示详细的数据信息。下面我们将全面解析tooltip的各个属
5
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表饼图基础属性讲解
大家好，欢迎回来鸿蒙5莓创图表组件的专场！我们这一期来深入讲解McCharts组合图组件的基础属性用法，涵盖grid、color、title、legend、tooltip、animation、series七大核心属性。每个属性都将从作用、类型、默认值、可选
3
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表饼图title属性用法详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解组合图组件中title属性的深度用法，带大家掌握标题模块的完整配置技巧！一、show属性作用：控制标题模块的显示与隐藏类型：Boolean默认值：true可选值：true（显示标题）、false（隐
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表饼图tooltip属性用法
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解组合图组件中tooltip属性的完整用法。这个功能模块是数据可视化交互的核心配置，掌握它的细节能让图表信息展示更专业。下面我们从底层属性开始逐层拆解：一、基础开关属性show作用：控制是否显示浮动提
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表组件折线类型的属性讲解-Title
大家好，欢迎回来鸿蒙5莓创图表组件的专场，很多小伙伴都不知道每个图表类型中的属性到底是干嘛的，怎么用。所以我们将详细去讲解每个属性，跟我一起学习吧。我们这一期来讲解McLineChart折线图组件中title属性的详细用法。这个属性控制着图表的标题显示，包
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表组件折线类型的属性讲解-xAxis
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解折线图组件中xAxis属性的详细用法。xAxis是控制X轴显示和样式的重要配置对象，掌握它的各项属性对于定制化图表至关重要。基础属性type作用：指定X轴的类型类型：String默认值：'data'
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表组件折线类型的属性讲解-yAxis
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解折线图组件中xAxis属性的详细用法。xAxis是控制X轴显示和样式的重要配置对象，掌握它的各项属性对于定制化图表至关重要。基础属性type作用：指定X轴的类型类型：String默认值：'data'
3
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创折线与柱状图legend属性详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解组合图组件McLineBarChart中legend属性的详细用法。1.show属性作用：控制是否显示图例类型：Boolean默认值：true可选值：true|false场景：当需要隐藏图例时设置为
2
0
0
陈杨 陈杨
•
8小时前
鸿蒙5莓创图表组件折线类型的属性讲解-legend
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McLineChart折线图组件的legend图例属性的详细用法。legend属性概述legend是折线图中非常重要的组件，用于展示不同系列的标识和名称，并支持交互操作。莓创图表提供了丰富的lege
3
0
0
陈杨
陈杨
Lv1
或许我一直徒劳无功的执着才知道之后该怎么洒脱
文章
130
粉丝
0
获赞
0
热门文章
鸿蒙5开发宝藏案例分享---应用接续提升内容发布体验
HarmonyOS5云服务技术分享--账号关联开发指南
鸿蒙5开发宝藏案例分享---性能分析简介
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
HarmonyOS5云服务技术分享--Serverless搭建抽奖