vue 中 多个 echarts图表切换显示,宽度width变化,使用 resize() 失效的一种情况

在 Vue 中，当我们需要切换多个 Echarts 图表的显示，而每个图表的宽度都不同时，就会出现 resize() 失效的情况。

这是因为 resize() 方法是用于重新调整图表的大小的，所以当多个图表的大小不同时，调用该方法就无法完整地重新绘制图表。

解决该问题的方法是使用类似于 v-if 之类的指令或者属性来动态改变每个图表的显示状态。例如，当某个图表需要显示时，我们可以将其对应的父元素的 display 属性设置为 block，当其需要隐藏时，将其设置为 none。同时，我们还需要动态改变每个图表的宽度属性，以确保 resize() 方法能够正常调用。

代码示例如下：

<template>
  <div class="chart-container">
    <div v-show="showChart1" :style="{width: '500px'}">
      <!-- echarts1 的配置和数据 -->
    </div>
    <div v-show="showChart2" :style="{width: '600px'}">
      <!-- echarts2 的配置和数据 -->
    </div>
    <div v-show="showChart3" :style="{width: '700px'}">
      <!-- echarts3 的配置和数据 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showChart1: true,
      showChart2: false,
      showChart3: false,
    };
  },
  methods: {
    toggleChart() {
      this.showChart1 = !this.showChart1;
      this.showChart2 = !this.showChart2;
      this.showChart3 = !this.showChart3;
      this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'));
      });
    },
  },
};
</script>

在上述示例中，我们使用了 v-show 指令来动态显示和隐藏每个图表，并使用 :style 绑定了每个图表的宽度属性。在 toggleChart 方法中，我们通过改变 showChart 的值来动态切换图表的显示状态，并在切换后调用了 resize() 方法重新绘制图表。注意，在调用 resize() 方法前需要使用 $nextTick 方法将其放入微任务队列中，以确保元素已经渲染完毕。