Vue 3 中，響應(yīng)式狀態(tài)都被封裝為一個 Proxy 實例。如果狀態(tài)本身也是一個對象，Vue 會默認同時代理其屬性（利用 Proxy 特性）。你的代碼 this.chart.setOption、this.chart.resize 訪問的實際上是被 Vue proxy 代理出來的屬性。這里應(yīng)該出現(xiàn)了引用問題，導致 ECharts 實例的某個方法調(diào)用失敗。

解決辦法

<template>
  <div class="echarts" ref="chart" />
</template>

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

let chart = {};

export default {
  name: "chart",
  data() {
    return {
      resizeTimer: null,
      version: "1.0",
      chartTemp: null,
    };
  },

  props: {
    // 圖表參數(shù)
    options: Object,
    initOptions: Object,
  },

  options: {
    deep: true,
    handler(options) {
      if (Object.prototype.toString.call(options) === "[object Object]") {
        this.setOption(options);
      }
    },
  },
  methods: {
    // 初始化
    init() {
      const { options, initOptions } = this.$props;
      if (chart[this.chartTemp]) {
        chart[this.chartTemp].dispose();
        chart[this.chartTemp] = null;
      }
      chart[this.chartTemp] = echarts.init(
        this.$refs.chart,
        {},
        initOptions
      );
      if (options) {
        chart[this.chartTemp].setOption(options);
      }
    },

    // 調(diào)整尺寸
    resize(options = {}) {
      this.resizeTimer = clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
      this.init()
      }, 300);
    },
  },
  mounted() {
    this.chartTemp = Math.random();
    this.$nextTick(() => {
      this.init();
    });
    window.addEventListener("resize", this.resize);
  },
  beforeUnmount() {
    if (chart[this.chartTemp]) {
      window.removeEventListener("resize", this.resize);
      this.resizeTimer = clearTimeout(this.resizeTimer);
      chart[this.chartTemp].dispose();
      chart[this.chartTemp] = null;
    }
  },
};
</script>

<style scoped>
.echarts {
  position: relative;
}
</style>