[Vue 警告]：挂载钩子中的错误：“ReferenceError：未定义上下文”

Question

我正在使用vue制作 web 页面。

我想在这个 web 页面中使用Echarts并插入一个漂亮的3D 地理 map 。

但是这个页面一直有一个错误： [Vue warn]: Error in mounted hook: "ReferenceError: context is not defined" 。

错误的详细代码在这里。

<template>
  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :span="24">
      <el-card class="box-card">
        <div id="Earth" :style="{ height: '770px' }"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  mounted() {
    this.drawEarth();
  },
  methods: {
    drawEarth() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var chartDom = document.getElementById("Earth");
      var myChart = echarts.init(chartDom);
      var option;

      ...

      var canvas = document.createElement("canvas");
      canvas.width = 4096;
      canvas.height = 2048;
      context = canvas.getContext("2d");
      context.lineWidth = 0.5;
      context.strokeStyle = config.color;
      context.fillStyle = config.color;
      context.shadowColor = config.color;
      $.when(
        $.getScript(
          "https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js"
        ),
        $.getScript(
          "https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js"
        ),
        $.getScript("https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js"),
        $.getScript(
          "https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js"
        )
      ).done(...);
    },
  },
};
</script>

Answer 1

这个问题通过fatm的提示解决了，他发表了评论。 在我添加了var context之后，出现了另一个问题：[Vue warn]: Error in mounted hook: "ReferenceError: $ is not defined"，但是这个问题更容易处理。 我只是import $ from 'jquery'; 在<script>的顶部，效果真是太棒了！！！