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

参考链接:
解决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>

重点:

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

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

相关推荐
Dragon Wu38 分钟前
前端 下载后端返回的二进制excel数据
前端·javascript·html5
北海几经夏44 分钟前
React响应式链路
前端·react.js
晴空雨1 小时前
React Media 深度解析:从使用到 window.matchMedia API 详解
前端·react.js
一个有故事的男同学1 小时前
React性能优化全景图:从问题发现到解决方案
前端
探码科技1 小时前
2025年20+超实用技术文档工具清单推荐
前端
Juchecar1 小时前
Vue 3 推荐选择组合式 API 风格(附录与选项式的代码对比)
前端·vue.js
uncleTom6661 小时前
# 从零实现一个Vue 3通用建议选择器组件:设计思路与最佳实践
前端·vue.js
影i1 小时前
iOS WebView 异步跳转解决方案
前端
Nicholas681 小时前
flutter滚动视图之ScrollController源码解析(三)
前端
爪洼守门员1 小时前
安装electron报错的解决方法
前端·javascript·electron