Vue3 对于echarts使用 v-show，导致显示不全,宽度仅100px，无法重新渲染的问题

selfsuer2024-12-06 12:28

参考链接：
解决Echarts图表使用v-show,显示不全,宽度仅100px的问题_echarts v-show图表不全-CSDN博客

Vue3 echarts v-show无法重新渲染的问题_v-show echarts不渲染-CSDN博客

原因不多赘述了，大概就是v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况，就像下图（截的别人的图）：

方法一：将 v-show 改成 v-if

但是我做的功能涉及频繁切换，以及更换成v-if后会导致图表的初始化找不到dom, 遂放弃。

方法二：使用nextTick(() => {}）函数

首先需要从vue中引入：

TypeScript 复制代码

<script lang="tsx" setup>

import {nextTick} from 'vue';


</script>

然后就是在需要切换v-show状态的地方：

TypeScript 复制代码

<template>

// 放echart图的div
<div v-show="isData" ref="chartRef" style="width:45%; height=400px"></div>

// 切换按钮
<button @click="changeButton">切换按钮</button>

</template>


<script lang="tsx" setup>

import {nextTick} from 'vue';

const isData = ref(false);

// 图表的渲染函数
const echartInit = () => {
    if(chartRef.value){
        const myEchart = echarts.init(chartRef.value);
        // 配置项
        const option = {

           // 此处省略
        };
        
        myEchart.setOption(option);

        // 千万别忘了要resize
        myEchart.resize();        
          
    };
};

const changeButton = () => {

    isData.value = true;
    if(isData.value){
        nextTick(() => {
          // 图表的渲染函数，重新强制让它渲染一次
          echartInit();
        })
    }
    
}
</script>

重点：

在切换 v-show 的变量时，使用nextTick(() => {}）函数重新调用一次渲染echarts的函数echartInit

2.在渲染函数echartInit 里面要最后写一句resize !