vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决

<template>
  <div>
    <div v-if="showChart">
      <echarts :options="chartOptions"></echarts>
    </div>
  </div>
</template>
 
<script>
import echarts from 'echarts';
 
export default {
  data() {
    return {
      showChart: false,
      chartOptions: {...} // 图表配置项
    };
  },
  mounted() {
    this.showChart = true;
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chartContainer = document.querySelector('#chart-container');
      const myChart = echarts.init(chartContainer);
      myChart.setOption(this.chartOptions);
    }
  }
};
</script>

<template>
  <keep-alive>
    <echarts :options="chartOptions"></echarts>
  </keep-alive>
</template>
 
<script>
import echarts from 'echarts';
 
export default {
  data() {
    return {
      chartOptions: {...} // 图表配置项
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chartContainer = document.querySelector('#chart-container');
      const myChart = echarts.init(chartContainer);
      myChart.setOption(this.chartOptions);
    }
  }
};
</script>