vue3清空echarts

在Vue3中清空Echarts图表可以通过以下几种方法实现：

1. 使用echarts.dispose()方法销毁Echarts实例：

import * as echarts from "echarts";
import { onUnmounted } from "vue";

export default {
  setup() {
    // 在组件销毁时调用echarts.dispose()方法销毁Echarts实例
    onUnmounted(() => {
      echarts.dispose(document.getElementById('myEcharts'));
    });
  }
}

2. 使用ref和watchEffect监听数据变化并重新渲染图表：

import * as echarts from "echarts";
import { ref, watchEffect, onUnmounted } from "vue";

export default {
  setup() {
    const chartInstance = ref(null);

    // 监听数据变化并重新渲染图表
    watchEffect(() => {
      if (chartInstance.value) {
        chartInstance.value.dispose();
      }
      chartInstance.value = echarts.init(document.getElementById('myEcharts'));
      // 渲染图表的代码
    });

    // 在组件销毁时调用echarts.dispose()方法销毁Echarts实例
    onUnmounted(() => {
      if (chartInstance.value) {
        chartInstance.value.dispose();
      }
    });
  }
}

3. 使用v-if条件渲染来销毁和重新创建Echarts实例：

import * as echarts from "echarts";
import { ref, onUnmounted } from "vue";

export default {
  setup() {
    const showChart = ref(true);
    let chartInstance = null;

    // 在组件销毁时调用echarts.dispose()方法销毁Echarts实例
    onUnmounted(() => {
      if (chartInstance) {
        chartInstance.dispose();
      }
    });

    return {
      showChart,
      initChart() {
        if (showChart.value) {
          chartInstance = echarts.init(document.getElementById('myEcharts'));
          // 渲染图表的代码
        } else {
          if (chartInstance) {
            chartInstance.dispose();
          }
        }
      },
      clearEcharts() {
        showChart.value = false;
      }
    };
  }
}