修复地图拖拽问题
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user