• Vue3清除Echarts图表

    一：前言

            Vue3是一款流行的JavaScript框架。它提供了丰富的工具和组件，使得开发者可以轻松构建交互式的Web应用程序。而Echarts是一款功能强大的图表库，它可以帮助开发者以直观的方式展示数据。
            在使用Vue3和E charts的过程中，我们有时需要销毁Echarts实例。这可能是因为我们需要重新渲染图表，或者是因为页面切换导致当前图表不再需要显示。无论是哪种情况，销毁Echarts实例是一个必要的步骤，以释放资源并避免内存泄漏。那么，如何在Vue3中销毁Echarts实例呢?下面我将为大家介绍几种常用的方法。

    二：移除图表

    1、前置

            在移除图表之前，我们先将前置的图标书写上去。以下是在 Vue3 中使用 Echarts 的代码。可以直接复制使用哦。

    1. <template>
    2.   <div class="echarts-box">
    3.     <div id="myEcharts" :style="{ width: this.width, height: this.height }">div>
    4.   div>
    5. template>
    6.  
    7. <script>
    8. import * as echarts from "echarts";
    9. import {onMounted, onUnmounted} from "vue";
    10.  
    11. export default {
    12.   name: "App",
    13.   props: ["width", "height"],
    14.   setup() {
    15.     let myEcharts = echarts;
    16.  
    17.     onMounted(() => {
    18.       initChart();
    19.     });
    20.  
    21.     onUnmounted(() => {
    22.       myEcharts.dispose;
    23.     });
    24.  
    25.  
    26.     function initChart() {
    27.       let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
    28.       chart.setOption({
    29.         title: {
    30.           text: "2021年各月份销售量（单位：件）",
    31.           left: "center",
    32.         },
    33.         xAxis: {
    34.           type: "category",
    35.           data: [
    36.             "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
    37.           ]
    38.         },
    39.         tooltip: {
    40.           trigger: "axis"
    41.         },
    42.         yAxis: {
    43.           type: "value"
    44.         },
    45.         series: [
    46.           {
    47.             data: [
    48.               606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
    49.             ],
    50.             type: "line",
    51.             smooth: true,
    52.             itemStyle: {
    53.               normal: {
    54.                 label: {
    55.                   show: true,
    56.                   position: "top",
    57.                   formatter: "{c}"
    58.                 }
    59.               }
    60.             }
    61.           }
    62.         ]
    63.       });
    64.       window.onresize = function () {
    65.         chart.resize();
    66.       };
    67.     }
    68.  
    69.     return {
    70.         initChart
    71.     };
    72.   }
    73. };
    74. script>
    75.

    2、效果图

    3、核心代码

            这里我们在