修复地图拖拽问题

This commit is contained in:
CN-JS-HuiBai
2026-04-05 01:41:26 +08:00
parent 6b82cfb561
commit 0cf10a7e8a
2 changed files with 27 additions and 5 deletions

View File

@@ -762,7 +762,7 @@ input:checked+.slider:before {
.globe-body { .globe-body {
height: 280px; /* Match chart-body height exactly */ height: 280px; /* Match chart-body height exactly */
padding: 12px 22px; padding: 0; /* Remove padding to avoid ECharts coordinate mismatch */
position: relative; position: relative;
overflow: hidden; overflow: hidden;
cursor: grab; cursor: grab;

View File

@@ -231,6 +231,7 @@
document.documentElement.classList.toggle('light-theme', theme === 'light'); document.documentElement.classList.toggle('light-theme', theme === 'light');
localStorage.setItem('theme', theme); localStorage.setItem('theme', theme);
updateThemeIcons(theme); updateThemeIcons(theme);
updateMap2DTheme(theme);
} }
function applyTheme(theme) { function applyTheme(theme) {
@@ -243,6 +244,7 @@
dom.themeToggle.checked = isLight; dom.themeToggle.checked = isLight;
document.documentElement.classList.toggle('light-theme', isLight); document.documentElement.classList.toggle('light-theme', isLight);
updateThemeIcons(actualTheme); updateThemeIcons(actualTheme);
updateMap2DTheme(actualTheme);
} }
function updateThemeIcons(theme) { function updateThemeIcons(theme) {
@@ -378,11 +380,15 @@
myMap2D = echarts.init(dom.globeContainer); myMap2D = echarts.init(dom.globeContainer);
const isLight = document.documentElement.classList.contains('light-theme');
const option = { const option = {
backgroundColor: 'transparent', backgroundColor: 'transparent',
tooltip: { tooltip: {
show: true, show: true,
trigger: 'item', trigger: 'item',
confine: true,
transitionDuration: 0,
backgroundColor: 'rgba(10, 14, 26, 0.9)', backgroundColor: 'rgba(10, 14, 26, 0.9)',
borderColor: 'var(--accent-indigo)', borderColor: 'var(--accent-indigo)',
textStyle: { color: '#fff', fontSize: 12 }, textStyle: { color: '#fff', fontSize: 12 },
@@ -405,15 +411,15 @@
roam: true, roam: true,
emphasis: { emphasis: {
label: { show: false }, label: { show: false },
itemStyle: { areaColor: '#2d334d' } itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
}, },
itemStyle: { itemStyle: {
areaColor: '#1a1d2d', areaColor: isLight ? '#eef0f5' : '#1a1d2d',
borderColor: '#2d334d', borderColor: isLight ? '#cbd5e1' : '#2d334d',
borderWidth: 1 borderWidth: 1
}, },
select: { select: {
itemStyle: { areaColor: '#2d334d' } itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
} }
}, },
series: [{ series: [{
@@ -443,6 +449,22 @@
} }
} }
function updateMap2DTheme(theme) {
if (!myMap2D) return;
const isLight = theme === 'light';
myMap2D.setOption({
geo: {
itemStyle: {
areaColor: isLight ? '#eef0f5' : '#1a1d2d',
borderColor: isLight ? '#cbd5e1' : '#2d334d'
},
emphasis: {
itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
}
}
});
}
function updateMap2D(servers) { function updateMap2D(servers) {
if (!myMap2D) return; if (!myMap2D) return;