鴻蒙5莓創橫向柱狀圖tooltip屬性詳解

大家好，歡迎回來鴻蒙5莓創圖表組件的專場，我們這一期來講解橫向柱狀圖(McHorBarChart)中tooltip屬性的詳細用法。tooltip是圖表中非常重要的交互組件，它能夠在用戶懸?；螯c擊時顯示詳細的數據信息。下面我們將全面解析tooltip的各個屬性及其子屬性。

1. show屬性

作用：控制提示層是否顯示類型：Boolean 默認值：true 可選值：true(顯示)、false(隱藏) 使用場景：當需要完全禁用提示層時，可以設置為false。例如在移動端小尺寸圖表中，可能不需要顯示tooltip。

@State tooltipOption: Options = new Options({
  tooltip: {
    show: false // 完全禁用提示層
  },
  // 其他配置...
})

2. padding屬性

作用：設置提示框內部邊距類型：Number 默認值：10 使用場景：當提示框內容較多時，可以適當增加內邊距使顯示更美觀；在緊湊布局中可以減小內邊距。

@State tooltipOption: Options = new Options({
  tooltip: {
    padding: 15 // 增大內邊距
  },
  // 其他配置...
})

3. backgroundColor屬性

作用：設置提示框背景顏色類型：String 默認值：'rgba(0,0,0,0.7)' 使用場景：根據應用主題調整提示框背景色，確保與圖表整體風格一致且文字可讀。

@State tooltipOption: Options = new Options({
  tooltip: {
    backgroundColor: 'rgba(255,255,255,0.9)' // 白色半透明背景
  },
  // 其他配置...
})

4. borderWidth屬性

作用：設置提示框邊框寬度類型：Number 默認值：0 使用場景：當需要突出提示框邊界時，可以設置邊框寬度。

@State tooltipOption: Options = new Options({
  tooltip: {
    borderWidth: 1 // 1像素邊框
  },
  // 其他配置...
})

5. borderColor屬性

作用：設置提示框邊框顏色類型：String 默認值：'rgba(0,0,0,0.7)' 使用場景：配合borderWidth使用，設置邊框顏色。

@State tooltipOption: Options = new Options({
  tooltip: {
    borderWidth: 1,
    borderColor: '#ff2659f5' // 設置粉色邊框
  },
  // 其他配置...
})

6. axisPointer屬性

作用：配置指示線樣式，包括線和陰影兩種類型類型：Object 默認值：見下方子屬性使用場景：用于突出顯示當前數據項對應的坐標位置。

6.1 type子屬性

作用：指示器類型類型：String 默認值：'line' 可選值：'line'(線型)、'shadow'(陰影型) 使用場景：線型適合精確指示，陰影型適合強調數據范圍。

@State tooltipOption: Options = new Options({
  tooltip: {
    axisPointer: {
      type: 'shadow' // 使用陰影指示器
    }
  },
  // 其他配置...
})

6.2 lineStyle子屬性

作用：線型指示器的樣式配置類型：Object 默認值：見下方子屬性

6.2.1 width子屬性

作用：線寬類型：Number 默認值：1 使用場景：調整指示線粗細。

@State tooltipOption: Options = new Options({
  tooltip: {
    axisPointer: {
      lineStyle: {
        width: 2 // 加粗指示線
      }
    }
  },
  // 其他配置...
})

6.2.2 type子屬性

作用：線的類型類型：String 默認值：'solid' 可選值：'solid'(實線)、'dashed'(虛線)、'dotted'(點線) 使用場景：虛線或點線可以創建更柔和的視覺指示。

@State tooltipOption: Options = new Options({
  tooltip: {
    axisPointer: {
      lineStyle: {
        type: 'dashed' // 虛線指示線
      }
    }
  },
  // 其他配置...
})

6.2.3 color子屬性

作用：線顏色類型：String 默認值：'#DDE2EB' 使用場景：調整指示線顏色以匹配圖表主題。

@State tooltipOption: Options = new Options({
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: '#ff2659f5' // 粉色指示線
      }
    }
  },
  // 其他配置...
})

6.3 shadowStyle子屬性

作用：陰影指示器的樣式配置類型：Object 默認值：見下方子屬性

6.3.1 color子屬性

作用：陰影顏色類型：String 默認值：'rgba(150,150,150,0.2)' 使用場景：調整陰影顏色和透明度。

@State tooltipOption: Options = new Options({
  tooltip: {
    axisPointer: {
      shadowStyle: {
        color: 'rgba(255,38,89,0.3)' // 粉色半透明陰影
      }
    }
  },
  // 其他配置...
})

6.3.2 borderWidth子屬性

作用：陰影邊框寬度類型：Number 默認值：0 使用場景：為陰影添加邊框。

@State tooltipOption: Options = new Options({
  tooltip: {
    axisPointer: {
      shadowStyle: {
        borderWidth: 1 // 添加陰影邊框
      }
    }
  },
  // 其他配置...
})

6.3.3 borderColor子屬性

作用：陰影邊框顏色類型：String 默認值：'rgba(150,150,150,0.2)' 使用場景：設置陰影邊框顏色。

@State tooltipOption: Options = new Options({
  tooltip: {
    axisPointer: {
      shadowStyle: {
        borderColor: '#ff2659f5' // 粉色陰影邊框
      }
    }
  },
  // 其他配置...
})

7. textStyle屬性

作用：配置提示框內文本樣式類型：Object 默認值：見下方子屬性使用場景：確保提示文本與背景有足夠對比度，且風格與整體應用一致。

7.1 color子屬性

作用：文本顏色類型：String 默認值：'#fff' 使用場景：根據背景色調整文本顏色確保可讀性。

@State tooltipOption: Options = new Options({
  tooltip: {
    textStyle: {
      color: '#333' // 深色文字
    }
  },
  // 其他配置...
})

7.2 fontWeight子屬性

作用：字體粗細類型：String 默認值：'normal' 可選值：'normal'、'bold'、'lighter'、'bolder'或數字值使用場景：強調重要信息。

@State tooltipOption: Options = new Options({
  tooltip: {
    textStyle: {
      fontWeight: 'bold' // 加粗文字
    }
  },
  // 其他配置...
})

7.3 fontFamily子屬性

作用：字體類型類型：String 默認值：'sans-serif' 使用場景：統一應用字體風格。

@State tooltipOption: Options = new Options({
  tooltip: {
    textStyle: {
      fontFamily: 'Arial' // 指定字體
    }
  },
  // 其他配置...
})

7.4 fontSize子屬性

作用：字體大小類型：Number 默認值：14 使用場景：根據圖表大小調整字體尺寸。

@State tooltipOption: Options = new Options({
  tooltip: {
    textStyle: {
      fontSize: 16 // 增大字體
    }
  },
  // 其他配置...
})

8. animationCurve屬性

作用：提示框顯示/隱藏的動畫曲線類型：String 默認值：'easeOutCubic' 可選值：CSS支持的動畫曲線，如'linear'、'ease'、'ease-in'等使用場景：自定義提示框動畫效果。

@State tooltipOption: Options = new Options({
  tooltip: {
    animationCurve: 'ease-in-out' // 平滑的進出動畫
  },
  // 其他配置...
})

9. animationFrame屬性

作用：提示框動畫持續時間(毫秒) 類型：Number 默認值：0(無動畫) 使用場景：控制動畫速度，0表示禁用動畫。

@State tooltipOption: Options = new Options({
  tooltip: {
    animationFrame: 300 // 300毫秒動畫
  },
  // 其他配置...
})

實際應用案例

下面是一個完整的tooltip配置示例，展示了如何創建一個自定義風格的提示框：

import { McHorBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State tooltipOption: Options = new Options({
    title: {
      show: true,
      text: '溫度變化趨勢',
      right: 20,
      top: 30
    },
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      name: '溫度(℃)'
    },
    tooltip: {
      show: true,
      padding: 12,
      backgroundColor: 'rgba(255,255,255,0.95)',
      borderWidth: 1,
      borderColor: '#ff2659f5',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(255,38,89,0.1)',
          borderWidth: 1,
          borderColor: 'rgba(255,38,89,0.2)'
        }
      },
      textStyle: {
        color: '#333',
        fontWeight: 'bold',
        fontFamily: 'Arial',
        fontSize: 14
      },
      animationCurve: 'ease-out',
      animationFrame: 200
    },
    series: [{
      name: '最高氣溫',
      data: [22, 23, 25, 28, 26, 24, 21]
    }, {
      name: '最低氣溫',
      data: [12, 13, 14, 16, 15, 13, 11]
    }]
  })

  build() {
    Row() {
      McHorBarChart({ options: this.tooltipOption })
    }
    .height('50%')
    .width('100%')
  }
}

在這個案例中，我們創建了一個白色背景、粉色邊框的提示框，帶有陰影指示器，文字使用深色加粗顯示，并有200毫秒的淡出動畫。這種配置在淺色背景的應用中非常醒目且專業。

好，這期講到這里就結束了，希望大家通過這篇文章能夠全面掌握McHorBarChart組件中tooltip屬性的各種配置方法，在實際開發中靈活運用，創建出既美觀又實用的數據可視化效果。如果有任何問題，歡迎在評論區留言討論！

posted @ 2025-06-25 16:44 woo爺說前端閱讀(23) 評論(0) 收藏舉報

刷新頁面返回頂部

woo爺說前端

為你專屬的前端知識