学ui设计培训学校株洲seo排名

参考链接：
解决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中引入：

<script lang="tsx" setup>import {nextTick} from 'vue';</script>

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

<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);// 千万别忘了要resizemyEchart.resize();        };
};const changeButton = () => {isData.value = true;if(isData.value){nextTick(() => {// 图表的渲染函数，重新强制让它渲染一次echartInit();})}}
</script>

重点：

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

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