diff --git a/src/App.vue b/src/App.vue index c6f84098..9276c382 100644 --- a/src/App.vue +++ b/src/App.vue @@ -45,6 +45,10 @@ declare global { function configureApexCharts() { if (typeof window !== 'undefined' && window.Apex) { try { + // 获取当前主题 + const currentTheme = globalTheme.name.value + const isDark = currentTheme === 'dark' || currentTheme === 'transparent' + // 数据标签 window.Apex.dataLabels = { formatter: function (_: number, { seriesIndex, w }: { seriesIndex: number; w: any }) { @@ -65,6 +69,10 @@ function configureApexCharts() { color: 'rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))', }, } + // 鼠标悬浮提示 + window.Apex.tooltip = { + theme: isDark ? 'dark' : 'light', + } } catch (error) { console.warn('ApexCharts 全局配置失败:', error) } @@ -176,6 +184,17 @@ onMounted(async () => { // 初始化data-theme属性 updateHtmlThemeAttribute(globalTheme.name.value) + // 监听主题变化 + watch( + () => globalTheme.name.value, + newTheme => { + // 更新HTML主题属性 + updateHtmlThemeAttribute(newTheme) + // 重新配置ApexCharts以适应新主题 + configureApexCharts() + }, + ) + // 默认隐藏页面 show.value = false @@ -249,7 +268,7 @@ onUnmounted(() => { class="background-image" :class="{ 'active': index === activeImageIndex }" :style="{ 'backgroundImage': `url(${imageUrl})` }" - > + />
diff --git a/src/views/dashboard/AnalyticsNetwork.vue b/src/views/dashboard/AnalyticsNetwork.vue index 04002f5e..6f1df3fa 100644 --- a/src/views/dashboard/AnalyticsNetwork.vue +++ b/src/views/dashboard/AnalyticsNetwork.vue @@ -67,10 +67,7 @@ const chartOptions = controlledComputed( animations: { enabled: false }, }, tooltip: { - enabled: true, - y: { - formatter: (value: number) => formatBytes(value), - }, + enabled: false, }, grid: { borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${