Vue集成Echarts-GL实现3D地图时mounted钩子报context未定义如何解决

报错根因分析 #

• 核心报错ReferenceError: context is not defined的直接原因是context变量未声明就直接赋值，在Vue默认开启的严格模式下会直接抛出引用错误。
• 后续代码中使用的$.when、$.getScript依赖jQuery，你当前项目未引入jQuery，修复完context问题后还会触发jQuery未定义报错，需要同步处理。

修复步骤 #

1. 解决context未定义问题 #

修改你代码中context赋值的行，添加变量声明关键字：

// 原代码：context = canvas.getContext("2d");
// 改为：
let context = canvas.getContext("2d");

2. 解决jQuery未定义问题 #

二选一即可：

• 方案1：项目引入jQuery
  执行安装命令：

npm install jquery

在当前Vue文件的script开头引入依赖：

import $ from 'jquery'

• 方案2：替换jQuery的脚本加载逻辑，用原生JS实现动态脚本加载，无需额外引入依赖。

可选优化建议 #

• 用Vue的ref属性获取DOM节点，避免id重复冲突：
  模板部分修改为：

<div ref="earthChart" :style="{ height: '770px' }></div>

JS获取实例部分修改为：

const chartDom = this.$refs.earthChart

• 页面销毁时释放ECharts实例避免内存泄漏：

// 在drawEarth方法中将echarts实例挂载到当前Vue实例：
this.myChart = echarts.init(chartDom)

// 新增生命周期钩子销毁实例
beforeUnmount() {
  this.myChart?.dispose()
}

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