Vue3中空白Div遮挡amCharts5 MapChart导致无法交互问题求助

问题1：Root实例未正确赋值，导致销毁不彻底 #

你的代码中，onMounted内部用var root重新声明了局部变量，导致外部全局的root变量始终未被赋值，组件卸载时无法执行root.dispose()，可能残留异常DOM元素。

修复代码：
将onMounted里的var root = am5.Root.new(chartdiv.value);改为：

root = am5.Root.new(chartdiv.value);

去掉var，让外部的root变量被正确赋值，确保组件卸载时能彻底销毁amCharts实例。

问题2：amCharts自动生成的辅助层遮挡交互 #

如果上述修复后仍存在空白Div，大概率是amCharts5创建的某个辅助DOM层（比如用于动画、事件捕获的容器）层级过高导致遮挡。可以通过CSS强制让该层不拦截鼠标事件：

添加非scoped样式（因为amCharts生成的元素不会带有Vue的scoped标识，scoped样式无法作用到它们）：

.testClass .am5-root > div {
  pointer-events: none;
}

/* 或者通过开发者工具查看空白Div的具体类名，更精准定位 */
.testClass .am5-[具体类名] {
  pointer-events: none;
}

pointer-events: none会让该Div忽略所有鼠标事件，下方的地图就能正常响应点击、hover等交互了。

额外检查点 #

• 打开浏览器开发者工具，查看空白Div的类名和属性：如果带有am5-前缀，确认是amCharts生成的元素；如果带有data-v-前缀，则是Vue注入的元素，需检查是否有重复渲染的逻辑。
• 确保amCharts5相关依赖包（@amcharts/amcharts5、@amcharts/amcharts5-geodata）是最新版本，避免版本bug导致的异常。

内容的提问来源于stack exchange，提问作者Dealman