大家好，歡迎回來鴻蒙5莓創(chuàng)圖表組件的專場(chǎng)，我們這一期來深入講解雷達(dá)圖組件中最重要的交互功能——tooltip（提示層）屬性的完整用法。作為數(shù)據(jù)可視化的"信息橋梁"，tooltip的靈活配置能極大提升圖表的信息傳達(dá)效率，下面我們以分層遞進(jìn)的方式全面解析每個(gè)配置項(xiàng)。

一、基礎(chǔ)控制屬性

1. show 顯示開關(guān)

作用：控制提示層的顯示與隱藏 類型：Boolean 默認(rèn)：true 場(chǎng)景：當(dāng)需要?jiǎng)討B(tài)控制提示層時(shí)（如移動(dòng)端性能優(yōu)化場(chǎng)景）

tooltip: { 
  show: false  // 隱藏所有提示層
}

2. padding 內(nèi)邊距

作用：設(shè)置提示層內(nèi)容與邊框的間距 類型：Number 默認(rèn)：10 場(chǎng)景：需要調(diào)整提示框緊湊度時(shí)

tooltip: {
  padding: 20,  // 擴(kuò)大內(nèi)邊距
  backgroundColor: '#fff'
}

二、視覺樣式配置

3. backgroundColor 背景色

作用：設(shè)置提示層背景顏色 類型：String 默認(rèn)：'rgba(0,0,0,0.7)' 可選值：顏色名稱/十六進(jìn)制/RGBA 場(chǎng)景：適配不同主題色時(shí)

tooltip: {
  backgroundColor: '#2c3e50',  // 深藍(lán)色背景
  textStyle: { color: '#fff' }
}

4. border 邊框組

• borderWidth：邊框粗細(xì)（Number，默認(rèn)0）
• borderColor：邊框顏色（String，默認(rèn)'#333'） 場(chǎng)景：需要突出提示層時(shí)

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

三、高級(jí)指示器配置

5. axisPointer 指示線

作用：設(shè)置坐標(biāo)軸指示線類型及樣式 類型：Object 子屬性：

• type：指示線類型（'line' | 'shadow'，默認(rèn)'line'）
• lineStyle：線型配置

• width：線寬（默認(rèn)1）
• type：線型（'solid' | 'dashed'，默認(rèn)'solid'）
• color：顏色（默認(rèn)'#DDE2EB'）

• shadowStyle：陰影配置

• color：陰影顏色（默認(rèn)'rgba(150,150,150,0.2)'）

• 場(chǎng)景：多數(shù)據(jù)對(duì)比時(shí)需要高亮區(qū)域

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

四、文本樣式體系

6. textStyle 文本配置

• 作用：控制提示層文字樣式 類型：Object 子屬性：

• color：文字顏色（String，默認(rèn)'#fff'）
• fontWeight：字重（'normal' | 'bold'，默認(rèn)'normal'）
• fontFamily：字體（String，默認(rèn)'sans-serif'）
• fontSize：字號(hào)（Number，默認(rèn)14）

• 場(chǎng)景：適配高對(duì)比度顯示環(huán)境

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

五、動(dòng)畫控制系統(tǒng)

7. animationCurve 動(dòng)畫曲線

• 作用：設(shè)置提示層出現(xiàn)/消失的動(dòng)畫效果 類型：String 默認(rèn)：'easeOutCubic' 可選值：'linear' | 'easeInOut' 等CSS動(dòng)畫曲線 場(chǎng)景：需要定制化動(dòng)效時(shí)

tooltip: {
  animationCurve: 'easeInOutQuad'
}

8. animationFrame 動(dòng)畫時(shí)長(zhǎng)

• 作用：控制動(dòng)畫持續(xù)時(shí)間（單位：毫秒） 類型：Number 默認(rèn)：0（無動(dòng)畫） 場(chǎng)景：需要流暢過渡效果時(shí)

tooltip: {
  animationFrame: 300  // 300ms動(dòng)畫
}

六、綜合實(shí)戰(zhàn)案例

• 電商數(shù)據(jù)對(duì)比場(chǎng)景：對(duì)比華為與蘋果手機(jī)在不同維度的表現(xiàn)

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
}

• 效果說明：白色半透明背景搭配紅色虛線指示器，文字采用深灰色系，在保持專業(yè)性的同時(shí)提升可讀性，200ms的彈性動(dòng)畫讓交互更生動(dòng)。

• 好，這期講到這里就結(jié)束了，希望大家通過這篇深度解析，能像搭積木一樣靈活運(yùn)用tooltip的各個(gè)屬性，打造出既專業(yè)又充滿設(shè)計(jì)感的交互提示系統(tǒng)。在實(shí)際開發(fā)中，建議先規(guī)劃好數(shù)據(jù)展示的優(yōu)先級(jí)，再通過"背景色-文字色-指示線"的配色三原則來設(shè)計(jì)tooltip的視覺層次，讓您的圖表真正成為數(shù)據(jù)故事的講述者！