vue中使用echarts刷新可以正常渲染，路由跳转不显示

在 Vue 中使用 ECharts 组件时，遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因。当你从一个页面切换到另一个页面时，旧页面上的组件会被销毁，并在新页面上重新创建。

<template>
  <div>
    <div ref="chartContainer"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      
      // 删除特殊属性 _echarts_instance_
      chartContainer.removeAttribute('_echarts_instance_');
      
      // 初始化ECharts实例
      this.myChart = echarts.init(chartContainer);
      
      // 设置图表配置项
      const options = {
        // Your ECharts options here
      };
      
      // 渲染图表
      this.myChart.setOption(options);
    },
  },
  beforeDestroy() {
    // 销毁ECharts实例
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};

通过在组件销毁前删除特殊属性 _echarts_instance_，并在重新创建ECharts实例时确保删除该属性，可以解决路由切换导致图表不显示的问题。