当前位置: 首页 > news >正文

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中引入:

<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 !

相关文章:

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

参考链接&#xff1a;解决Echarts图表使用v-show,显示不全,宽度仅100px的问题_echarts v-show图表不全-CSDN博客 Vue3 echarts v-show无法重新渲染的问题_v-show echarts不渲染-CSDN博客 原因不多赘述了&#xff0c;大概就是v-show 本身是结构已经存在&#xff0c;当数据发生…...

C++实现俄罗斯方块

俄罗斯方块 还记得俄罗斯方块吗&#xff1f;相信这是小时候我们每个人都喜欢玩的一个小游戏。顾名思义&#xff0c;俄罗斯方块自然是俄罗斯人发明的。这人叫阿列克谢帕基特诺夫。他设置这个游戏的规则是&#xff1a;由小方块组成的不同形状的板块陆续从屏幕上方落下来&#xf…...

鸿蒙分享:添加模块,修改app名称图标

新建公共模块common 在entry的oh-package.json5添加dependencies&#xff0c;引入common模块 "dependencies": {"common": "file:../common" } 修改app名称&#xff1a; common--src--resources--string.json 新增&#xff1a; {"name&q…...

扫描IP段内的使用的IP

扫描IP段内的使用的IP 方法一&#xff1a;命令行 命令行进入 for /L %i IN (1,1,254) DO ping -w 1 -n 1 192.168.3.%iarp -a方法二&#xff1a;python from scapy.all import ARP, Ether, srp import keyboarddef scan_network(ip_range):# 创建一个ARP请求包arp ARP(pds…...

【专题】虚拟存储器

前文提到的存储器管理方式有一个共同的特点&#xff0c;即它们都要求将一个作业全部装入内存后方能运行。 但有两种特殊情况&#xff1a; 有的作业很大&#xff0c;其所要求的内存空间超过了内存总容量&#xff0c;作业不能全部被装入内存&#xff0c;致使该作业无法运行&#…...

Python之爬虫入门--示例(2)

一、Requests库安装 可以使用命令提示符指令直接安装requests库使用 pip install requests 二、爬取JSON数据 &#xff08;1&#xff09;、点击网络 &#xff08;2&#xff09;、刷新网页 &#xff08;3&#xff09;、这里有一些数据类型&#xff0c;选择全部 &#xff08…...

5G CPE终端功能及性能评测(四)

5G CPE 功能性能评测 本文选取了几款在工业应用领域应用较多的5G CPE,对其功能和性能进行了对比评测。功能方面主要对比了网络接口数量,VPN功能 支持情况。以下测试为空口测试,测试结果受环境影响较大,性能仅供参考。总体看,高通X55芯片下行最优,速率稳定。 功能 对比CPE…...

人工智能驱动的骗局会模仿熟悉的声音

由于人工智能技术的进步&#xff0c;各种现代骗局变得越来越复杂。 这些骗局现在包括人工智能驱动的网络钓鱼技术&#xff0c;即使用人工智能模仿家人或朋友的声音和视频。 诈骗者使用来自社交媒体的内容来制作深度伪造内容&#xff0c;要求提供金钱或个人信息。个人应该通过…...

电子病历静态数据脱敏路径探索

一、引言 数据脱敏&#xff08;Data Masking&#xff09;&#xff0c;屏蔽敏感数据&#xff0c;对某些敏感信息&#xff08;比如patient_name、ip_no、ad、no、icd11、drug等等 &#xff09;通过脱敏规则进行数据的变形&#xff0c;实现隐私数据的可靠保护。电子病历作为医疗领…...

混合云策略在安全领域受到青睐

Genetec 发布了《2025 年物理安全状况报告》&#xff0c;该报告根据超过 5,600 名该领域领导者&#xff08;其中包括 100 多名来自澳大利亚和新西兰的领导者&#xff09;的回应&#xff0c;揭示了物理安全运营的趋势。 报告发现&#xff0c;澳大利亚和新西兰的组织采用混合云策…...

Echarts使用平面方法绘制三维立体柱状图表

目录 一、准备工作 1.下载引入ECharts库 2.创建容器 二、绘制基本柱状 三、绘制立体柱状方法一 1.定义立方体形状 2.注册立方体形状 3.配置custom系列 4.设置数据 5.渲染图表 四、绘制立体柱状方法二 1.画前知识 2.计算坐标renderItem 函数 &#xff08;1&#x…...

java-判断语句

题目一&#xff1a;选择练习1 657. 选择练习1 - AcWing题库 代码 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int a sc.nextInt(), b sc.nextInt();int c sc.nextInt(), d sc.nextInt();…...

11.14【JAVA EXP3】【DEBUG】

比较疑惑的一点是当前页面&#xff08;资源的url)与请求的url? 请求的url由webService接收&#xff0c;servelt当中也可以发送出这个url 进行页面跳转&#xff0c;是跳转到某个Jsp页面&#xff0c;这个页面的url是在哪里定义的&#xff1f; 在Jsp打印信息&#xff0c;这个报…...

UE5 和 UE4 中常用的控制台命令总结

调用控制台 按下键盘上的 ~ 键可以调用控制台命令。 技巧 使用键盘的 ↑ 键可以查看之前输入过的指令。控制台指令并不需要打全名&#xff0c;输入空格后跟随指令的部分字符可以进行模糊搜索。按下 Ctrl Shift , 打开 GPUProfile 面板。 命令如下&#xff1a; 调试类 s…...

MR30分布式IO模块赋能喷水织机

纺织行业作为我国传统支柱产业&#xff0c;历经数千年的演变&#xff0c;如今仍面临着诸多困境&#xff0c;在纺织行业中&#xff0c;每一次技术的飞跃都是对行业边界的勇敢探索。在纺织行业&#xff0c;喷水织机作为关键生产设备&#xff0c;其性能直接影响到产品质量和产能。…...

C++中的封装性

定义&#xff1a; 封装性&#xff1a; 1.将属性&#xff08;成员变量&#xff09;和行为&#xff08;成员函数&#xff09;作为一个整体&#xff0c;表现在生活中的事物 2.将属性和行为加以权限控制 &#xff08;将事物的属性&#xff08;成员变量&#xff09;和行为&#…...

PyTorch 深度学习框架简介:灵活、高效的 AI 开发工具

PyTorch 深度学习框架简介&#xff1a;灵活、高效的 AI 开发工具 PyTorch 作为一个深度学习框架&#xff0c;以其灵活性、可扩展性和高效性广受欢迎。无论是在研究领域进行创新实验&#xff0c;还是在工业界构建生产级的深度学习模型&#xff0c;PyTorch 都能提供所需的工具和…...

leetcode-22.括号生成

暴力 感谢分享这个思路和算法。生成括号的问题可以通过生成所有可能的括号序列并验证其有效性来解决。以下是对该思路的详细解释和实现&#xff1a; 思路 生成所有可能的序列&#xff1a; 使用递归生成所有长度为 2n 的括号序列。在每个位置可以选择放置 ( 或 )。 验证序列的…...

devops-Dockerfile+Jenkinsfile方式部署Java前后端应用

文章目录 概述部署前端Vue应用一、环境准备1、Dockerfile2、.dockerignore3、nginx.conf4、Jenkinsfile 二、Jenkins部署1、新建任务2、流水线3、Build Now 构建 & 访问 Springboot后端应用1. 准备工作2. 创建项目结构3. 编写 Dockerfile后端 Dockerfile (backend/Dockerfi…...

【Apache Paimon】-- 4 -- Flink 消费 kafka 数据,然后写入 paimon

目录 1、本地开发环境 2、kafka2paimon 实现流程 3、代码实现 3.1、项目名称 3.2、项目结构 3.3、Pom.xml 和 log4j.properties 文件 3.4、代码核心类 3.4.1、入口类:Kafka2PaimonDemo.java 3.4.2、参数解析类 3.4.2.1、JobParameterUtil.java( flink job schedule…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...