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,无法重新渲染的问题
参考链接:解决Echarts图表使用v-show,显示不全,宽度仅100px的问题_echarts v-show图表不全-CSDN博客 Vue3 echarts v-show无法重新渲染的问题_v-show echarts不渲染-CSDN博客 原因不多赘述了,大概就是v-show 本身是结构已经存在,当数据发生…...
C++实现俄罗斯方块
俄罗斯方块 还记得俄罗斯方块吗?相信这是小时候我们每个人都喜欢玩的一个小游戏。顾名思义,俄罗斯方块自然是俄罗斯人发明的。这人叫阿列克谢帕基特诺夫。他设置这个游戏的规则是:由小方块组成的不同形状的板块陆续从屏幕上方落下来…...
鸿蒙分享:添加模块,修改app名称图标
新建公共模块common 在entry的oh-package.json5添加dependencies,引入common模块 "dependencies": {"common": "file:../common" } 修改app名称: common--src--resources--string.json 新增: {"name&q…...
扫描IP段内的使用的IP
扫描IP段内的使用的IP 方法一:命令行 命令行进入 for /L %i IN (1,1,254) DO ping -w 1 -n 1 192.168.3.%iarp -a方法二:python from scapy.all import ARP, Ether, srp import keyboarddef scan_network(ip_range):# 创建一个ARP请求包arp ARP(pds…...
【专题】虚拟存储器
前文提到的存储器管理方式有一个共同的特点,即它们都要求将一个作业全部装入内存后方能运行。 但有两种特殊情况: 有的作业很大,其所要求的内存空间超过了内存总容量,作业不能全部被装入内存,致使该作业无法运行&#…...
Python之爬虫入门--示例(2)
一、Requests库安装 可以使用命令提示符指令直接安装requests库使用 pip install requests 二、爬取JSON数据 (1)、点击网络 (2)、刷新网页 (3)、这里有一些数据类型,选择全部 (…...
5G CPE终端功能及性能评测(四)
5G CPE 功能性能评测 本文选取了几款在工业应用领域应用较多的5G CPE,对其功能和性能进行了对比评测。功能方面主要对比了网络接口数量,VPN功能 支持情况。以下测试为空口测试,测试结果受环境影响较大,性能仅供参考。总体看,高通X55芯片下行最优,速率稳定。 功能 对比CPE…...
人工智能驱动的骗局会模仿熟悉的声音
由于人工智能技术的进步,各种现代骗局变得越来越复杂。 这些骗局现在包括人工智能驱动的网络钓鱼技术,即使用人工智能模仿家人或朋友的声音和视频。 诈骗者使用来自社交媒体的内容来制作深度伪造内容,要求提供金钱或个人信息。个人应该通过…...
电子病历静态数据脱敏路径探索
一、引言 数据脱敏(Data Masking),屏蔽敏感数据,对某些敏感信息(比如patient_name、ip_no、ad、no、icd11、drug等等 )通过脱敏规则进行数据的变形,实现隐私数据的可靠保护。电子病历作为医疗领…...
混合云策略在安全领域受到青睐
Genetec 发布了《2025 年物理安全状况报告》,该报告根据超过 5,600 名该领域领导者(其中包括 100 多名来自澳大利亚和新西兰的领导者)的回应,揭示了物理安全运营的趋势。 报告发现,澳大利亚和新西兰的组织采用混合云策…...
Echarts使用平面方法绘制三维立体柱状图表
目录 一、准备工作 1.下载引入ECharts库 2.创建容器 二、绘制基本柱状 三、绘制立体柱状方法一 1.定义立方体形状 2.注册立方体形状 3.配置custom系列 4.设置数据 5.渲染图表 四、绘制立体柱状方法二 1.画前知识 2.计算坐标renderItem 函数 (1&#x…...
java-判断语句
题目一:选择练习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】
比较疑惑的一点是当前页面(资源的url)与请求的url? 请求的url由webService接收,servelt当中也可以发送出这个url 进行页面跳转,是跳转到某个Jsp页面,这个页面的url是在哪里定义的? 在Jsp打印信息,这个报…...
UE5 和 UE4 中常用的控制台命令总结
调用控制台 按下键盘上的 ~ 键可以调用控制台命令。 技巧 使用键盘的 ↑ 键可以查看之前输入过的指令。控制台指令并不需要打全名,输入空格后跟随指令的部分字符可以进行模糊搜索。按下 Ctrl Shift , 打开 GPUProfile 面板。 命令如下: 调试类 s…...
MR30分布式IO模块赋能喷水织机
纺织行业作为我国传统支柱产业,历经数千年的演变,如今仍面临着诸多困境,在纺织行业中,每一次技术的飞跃都是对行业边界的勇敢探索。在纺织行业,喷水织机作为关键生产设备,其性能直接影响到产品质量和产能。…...
C++中的封装性
定义: 封装性: 1.将属性(成员变量)和行为(成员函数)作为一个整体,表现在生活中的事物 2.将属性和行为加以权限控制 (将事物的属性(成员变量)和行为&#…...
PyTorch 深度学习框架简介:灵活、高效的 AI 开发工具
PyTorch 深度学习框架简介:灵活、高效的 AI 开发工具 PyTorch 作为一个深度学习框架,以其灵活性、可扩展性和高效性广受欢迎。无论是在研究领域进行创新实验,还是在工业界构建生产级的深度学习模型,PyTorch 都能提供所需的工具和…...
leetcode-22.括号生成
暴力 感谢分享这个思路和算法。生成括号的问题可以通过生成所有可能的括号序列并验证其有效性来解决。以下是对该思路的详细解释和实现: 思路 生成所有可能的序列: 使用递归生成所有长度为 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…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
