鸿蒙5莓创雷达图表tooltip详解

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来深入讲解雷达图组件中最重要的交互功能——tooltip（提示层）属性的完整用法。作为数据可视化的"信息桥梁"，tooltip的灵活配置能极大提升图表的信息传达效率，下面我们以分层递进的方式全面解析每个配置项。

---

一、基础控制属性

1. show 显示开关

作用：控制提示层的显示与隐藏 类型：Boolean 默认：true 场景：当需要动态控制提示层时（如移动端性能优化场景）

tooltip: { 
  show: false  // 隐藏所有提示层
}

2. padding 内边距

作用：设置提示层内容与边框的间距 类型：Number 默认：10 场景：需要调整提示框紧凑度时

tooltip: {
  padding: 20,  // 扩大内边距
  backgroundColor: '#fff'
}

---

二、视觉样式配置

3. backgroundColor 背景色

作用：设置提示层背景颜色 类型：String 默认：'rgba(0,0,0,0.7)' 可选值：颜色名称/十六进制/RGBA 场景：适配不同主题色时

tooltip: {
  backgroundColor: '#2c3e50',  // 深蓝色背景
  textStyle: { color: '#fff' }
}

4. border 边框组

• borderWidth：边框粗细（Number，默认0）
• borderColor：边框颜色（String，默认'#333'） 场景：需要突出提示层时

tooltip: {
  borderWidth: 2,
  borderColor: '#e74c3c',  // 红色警示边框
  backgroundColor: '#f9f9f9'
}

---

三、高级指示器配置

5. axisPointer 指示线

作用：设置坐标轴指示线类型及样式 类型：Object 子属性：

• type：指示线类型（'line' | 'shadow'，默认'line'）
• lineStyle：线型配置

• width：线宽（默认1）
• type：线型（'solid' | 'dashed'，默认'solid'）
• color：颜色（默认'#DDE2EB'）

• shadowStyle：阴影配置

• color：阴影颜色（默认'rgba(150,150,150,0.2)'）

• 场景：多数据对比时需要高亮区域

tooltip: {
  axisPointer: {
    type: 'shadow',
    shadowStyle: {
      color: 'rgba(255,165,0,0.2)',  // 橙色阴影
      borderWidth: 0
    }
  }
}

---

四、文本样式体系

6. textStyle 文本配置

• 作用：控制提示层文字样式 类型：Object 子属性：

• color：文字颜色（String，默认'#fff'）
• fontWeight：字重（'normal' | 'bold'，默认'normal'）
• fontFamily：字体（String，默认'sans-serif'）
• fontSize：字号（Number，默认14）

• 场景：适配高对比度显示环境

tooltip: {
  textStyle: {
    color: '#2c3e50',
    fontWeight: 'bold',
    fontSize: 16,
    fontFamily: 'Microsoft YaHei'
  }
}

---

五、动画控制系统

7. animationCurve 动画曲线

• 作用：设置提示层出现/消失的动画效果 类型：String 默认：'easeOutCubic' 可选值：'linear' | 'easeInOut' 等CSS动画曲线 场景：需要定制化动效时

tooltip: {
  animationCurve: 'easeInOutQuad'
}

8. animationFrame 动画时长

• 作用：控制动画持续时间（单位：毫秒） 类型：Number 默认：0（无动画） 场景：需要流畅过渡效果时

tooltip: {
  animationFrame: 300  // 300ms动画
}

---

六、综合实战案例

• 电商数据对比场景：对比华为与苹果手机在不同维度的表现

tooltip: {
  show: true,
  padding: 15,
  backgroundColor: 'rgba(255,255,255,0.95)',
  borderWidth: 1,
  borderColor: '#bdc3c7',
  textStyle: {
    color: '#2d3436',
    fontSize: 14,
    fontFamily: 'Arial'
  },
  axisPointer: {
    type: 'line',
    lineStyle: {
      width: 2,
      color: '#e74c3c',
      type: 'dashed'
    }
  },
  animationCurve: 'easeInOutBack',
  animationFrame: 200
}

• 效果说明：白色半透明背景搭配红色虚线指示器，文字采用深灰色系，在保持专业性的同时提升可读性，200ms的弹性动画让交互更生动。

---

• 好，这期讲到这里就结束了，希望大家通过这篇深度解析，能像搭积木一样灵活运用tooltip的各个属性，打造出既专业又充满设计感的交互提示系统。在实际开发中，建议先规划好数据展示的优先级，再通过"背景色-文字色-指示线"的配色三原则来设计tooltip的视觉层次，让您的图表真正成为数据故事的讲述者！