• 混入封装

import {
    
     debounce } from "lodash";
export default {
    
    
  data() {
    
    
    return {
    
    
      handleResize: debounce(this.resizeChart, 100),
    };
  },
  mounted() {
    
    
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    
    
    window.removeEventListener("resize", this.handleResize);
    this.disposeChart();
  },
  updated() {
    
    
    this.handleResize();
  },
  methods: {
    
    
    resizeChart() {
    
    
      this.chart?.resize();
    },
    disposeChart() {
    
    
      // dispose() 方法是图表库提供的一个方法，用于销毁图表实例，释放其占用的资源。
      this.chart?.dispose();
    },
  },
};

• 使用

<template>
  <div ref="chart"></div>
</template>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/resize.js";
export default {
    
    
  mixins: [resize],
  data() {
    
    
    return {
    
    
      chart: null,
    };
  },
  mounted() {
    
    
    this.initChart();
  },
  methods: {
    
    
    initChart() {
    
    
      this.$nextTick(() => {
    
    
        // 初始化前，先销毁实例
        this.chart && this.chart.dispose();
        this.chart = echarts.init(this.$refs.chart);
      });
    },
  },
};