Echarts常见问题（v-if、v-show布局问题）

在Vue中使用Echarts时，可以通过v-if来控制Echarts的显示和隐藏。在模板中添加一个容器div，并绑定一个v-if属性。当v-if的值为true时，显示Echarts；当v-if的值为false时，隐藏Echarts。

当使用v-if(v-show)控制显隐时，会出现布局问题（例如：100%识别成100px）

解决方案

<template>
  <div>
    <div ref="例子" v-if="isShow" ref="echarts" style="width: 500px; height: 300px;"></div>
  </div>
</template>

<script setup lang="ts">
import echarts from '@/common/utils/echarts.ts';

const allEcharts = ref([]); //创建集合接受每个Echarts对象

const 例子 = ref(); //dom

const Option1 = {
  title: {
    text: '',
  },
  tooltip: {
    trigger: '',
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  series: {
    name: '',
    type: 'pie',
    radius: '50%',
    avoidLabelOverlap: true,
    emphasis: {
      label: {
        show: true,
        fontSize: 20,
        fontWeight: 'bold',
      },
    },
    labelLine: {
      show: true,
    },
    data: [],
  },
};


const myEcharts = echarts.init(例子.value);
allEcharts.value.push(myEcharts);

myEcharts .setOption(Option1, true);

// 重新分配大小
onUpdated(() => {
  allEcharts.value.forEach((i) => {
    i.resize();
  });
});
</script>