Cannot read properties of undefined (reading 'on')

Question

ShowLineChart(stype) {
console.log(this.LineChart);

  // if (LineChart != null && LineChart !== "" && LineChart !== undefined) {
  //   LineChart.dispose(); //销毁
  // }
  // const childComponentInstance = this.$refs.MessageBox.getChart();
  // console.log(childComponentInstance);
  // LineChart = this.$echarts.init(childComponentInstance);
  console.log(111);
  let newData = [];
  if (CA === 1) {
    let lineItem = new serBarItem();
    // console.log(lineItem);

    lineItem.name = "";
    lineItem.type = "line";
    for (let reg = 0; reg < data_times.length; reg++) {
      console.log(data_times[reg].value);
      if (data_times[reg] && data_times[reg].hasOwnProperty('value')) {
        lineItem.data.push(data_times[reg].value);
      } else {
        // 如果 value 不存在，输出警告并跳过当前迭代
        console.warn('Warning: data_times[reg].value is undefined');
      }

    }
    newData.push(lineItem);
  }

  if (CA === 2) {
    for (let reg = 0; reg < regionNames.length; reg++) {
      let lineItem = new serBarItem();
      lineItem.name = regionNames[reg];
      lineItem.type = "line";
      for (let i = 0; i < data_region_times.length; i++) {
        if (lineItem.name === data_region_times[i].name) {
          lineItem.data.push(data_region_times[i].value);
        }
      }
      newData.push(lineItem);
    }
  }
  if (LineaxisData.length > 1) {
    Line_option.xAxis.data = LineaxisData;
    Line_option.series = newData;
    Line_option.title.text = "";
  } else {
    Line_option.xAxis.data = [];
    Line_option.series = [];
    Line_option.title.text = "数据不足，请注意选择时间段";
  }
  LineChart.on("finished", (_) => {
    app.watchSize();
  });
  // LineChart.setOption(Line_option, true); //true重绘
  this.$refs.MessageBox.upChart(Line_option)
},

Answer 1

🕒下午好，题主！目前：🟢[在线]
📢参考GPT-4o mini 模型、由清水白石008整理提供！
📣今日金句：成功是百分之一的灵感，加上百分之九十九的汗水。”** — 托马斯·爱迪生

这个错误是因为 LineChart 是 undefined，所以你不能调用 on 方法。

在你的代码中，LineChart 是一个变量，但是你没有初始化它。所以，当你试图调用 on 方法时，JavaScript 会抛出一个错误，因为 LineChart 是 undefined。

为了解决这个问题，你需要初始化 LineChart 变量。根据你的代码，我猜测你应该使用 this.$echarts.init 方法来初始化 LineChart。

以下是你的代码的修改版本：

ShowLineChart(stype) {
  console.log(this.LineChart);

  // 初始化 LineChart
  if (!this.LineChart) {
    const childComponentInstance = this.$refs.MessageBox.getChart();
    this.LineChart = this.$echarts.init(childComponentInstance);
  }

  // ... 其他的代码 ...
}

在这个修改版本中，我添加了一个检查来确保 LineChart 不是 undefined。如果 LineChart 是 undefined，我会使用 this.$echarts.init 方法来初始化它。

请注意，你需要确保 this.$refs.MessageBox.getChart() 返回一个有效的 DOM 元素，否则 this.$echarts.init 方法会抛出一个错误。