keep-alive包裹的两个页面使用了echart,在resize后切换,echart会出现空白现象,需要再resize才会出现

问题:页面有2个echarts图,一打开页面图表是有的,然后切换到另一个页面,也是有2个echarts图,然后缩放浏览器窗口,再切换回第一次打开的页面,图表不显示。

因为keep-live保存了当前页面的属性,相当于给这个页面设置了display:none,当切换再切回去时候,保存的图的属性和当前浏览器大小不匹配,就认为这个图没被加载过,它的宽高都是0了
解决办法
在activated生命周期里,添加echarts实例的resize方法

activated() {this.chart.resize()
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/804590.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Knife4j的配置

要使用Knife4j&#xff0c;需要进行以下配置步骤&#xff1a; 在pom.xml文件中添加依赖&#xff1a; <!-- Knife4j --> <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><v…

Linux 学习之路 - 进程篇 - PCB介绍1-标识符

目录 一、基础的命令 <1> ps axj 命令 <2> top 命令 <3> proc 目录 二、进程的标识符 <1>范围 <2>如何获取标识符 <3>bash进程 三、创建进程 一、基础的命令 前面介绍了那么多&#xff0c;但是我们没有观察到进程相关状态&#x…

js把数组中的某些项移动到前面,使用sort函数

在JavaScript中&#xff0c;使用sort函数可以按照特定的规则对数组进行排序。如果你想根据特定的条件把数组中的某些项移动到前面&#xff0c;你可以使用sort函数来实现这一点。以下是一个例子&#xff0c;演示了如何使用sort函数把满足特定条件的数组项移动到数组的前面&#…

机器人码垛机的技术特点与应用

随着科技的飞速发展&#xff0c;机器人技术正逐渐渗透到各个行业领域&#xff0c;其中&#xff0c;机器人码垛机在物流行业的应用尤为引人瞩目。它不仅提高了物流效率&#xff0c;降低了成本&#xff0c;更在改变传统物流模式的同时&#xff0c;为行业发展带来了重大的变革。 一…

MQ死信队列:面试题

所谓的死信队列只不过是我们自己定义的一个队列&#xff0c;注意对于这个队列只能人工干预 面试题&#xff1a;你们是如何保证消息不会丢失的 1&#xff0c;什么是死信 在RabitMQ中充当主角的就是消息&#xff0c;在不同场景下&#xff0c;消息会有不同地表现。 死信就是在…

python蓝桥杯选数

文章目录 前言一、题意二、代码1.代码的实现2.读入数据 总结 前言 本题涉及到很多python中的知识点&#xff0c;比如combinations&#xff08;列表的组合&#xff09;应用&#xff0c;以及素数的判断 一、题意 已知 n 个整数 x1,x2,…,xn,以及一个整数 k&#xff08;k&#x…

SQL 批量替换表中某一列字段的值

现有客户数据如下&#xff0c;需要将表 t_109_original&#xff0c;中的FILE_PATH 字段里面值含 P9_3 全部替换为 P9_4 FILE_SIZEFILE_PATHFILE_NAME167376P9_3/original/12/109/35/0/35.jpg0103-Y-.DJ.G-第1号-0001-001-0002.jpg169230P9_3/original/12/109/36/0/36.jpg0103-…

SpringBoot学习笔记三-原理分析

SpringBoot学习笔记三-原理分析 SpringBoot自动装配1.1 案例1.2 通过注解方式管理Bean1.3 小结1.4 Enable注解1.5 Import注解1.5.1 ImportSelector实现类1.5.2 导入ImportBeanDefinitionRegistrar 1.5 EnableAutoConfiguration1.6 案例 SpringBoot自动装配 当再pom.xml中导入对…

活动发布会新闻通稿如何写?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 撰写活动发布会的新闻通稿需要遵循一定的结构和内容要点&#xff0c;以确保信息的准确性、完整性和吸引力。以下是撰写活动发布会新闻通稿的基本步骤和建议&#xff1a; 标题&#xff1…

【智能算法】长鼻浣熊优化算法(COA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2023年&#xff0c;M Dehghani等人受到长鼻浣熊自然行为启发&#xff0c;提出了长鼻浣熊优化算法&#xff08;Coati Optimization Algorithm&#xff0c;COA&#xff09;。 2.算法原理 2.1算法思想…

C语言 函数——函数封装与程序的健壮性

目录 函数封装&#xff08;Encapsulation&#xff09; 如何增强程序的健壮性&#xff1f; 如何保证不会传入负数实参&#xff1f; 函数设计的基本原则 函数封装&#xff08;Encapsulation&#xff09; 外界对函数的影响——仅限于入口参数 函数对外界的影响——仅限于一个…

C++:内联函数inline,auto关键字,基于范围的for循环,nullpter

文章目录 1.内联函数 inline1.1 概念1.2查看方法1.3 特性1.4 题外话&#xff1a;宏 2.auto关键字2.1 auto 简介2.2 auto使用细则 3. 基于范围的for循环4. nullpter 1.内联函数 inline 1.1 概念 inline int Add(int x, int y) {return x y; } int main(){int ret 0;ret Add…

vim的一些查找及修改操作

:s/foo/bar/gc&#xff1a;在行中查找 foo 并询问是否替换为 bar。 :v/pattern/d&#xff1a;删除所有不匹配 pattern 的行。 :g/pattern/d&#xff1a;删除所有匹配 pattern 的行。 :g/pattern/s/foo/bar/g&#xff1a;在匹配 pattern 的行中&#xff0c;将 foo 替换为 bar。…

Etcd 故障节点修复

etcd: 3.3.11 查询出故障的节点 在正常节点上操作 export ETCDCTL_API=3 etcdctl --endpoints http://192.168.56.100:2379,http://192.168.56.101:2379 member list --write-out="table"export ETCDCTL_API=3 etcdctl --endpoints http://192.168.56.100:2379,htt…

Vue input密码输入框自定义密码眼睛icon

我们用的饿了么UI组件库里,密码输入框的icon是固定不变的,如下所示: 点击"眼睛"这个icon不变,现在需求是UI给的设计稿里,密码输入框的"眼睛"有如下两种: 代码如下: <el-input:key="passwordType"ref="password"

重装系统前备份笔记

一、点查看自定义快捷键可以定义一些快速启动方式 然后用不习惯的快捷键也能在这里改 二、android studio 快捷键导出备份 导入方法&#xff1a; android studio &#xff0d;>file->import setting ->选择jar包即可 导出studio的设置方法&#xff1a; android …

vite项目如何安装element

创建vitevue3项目 npm create vitelatest安装element包 # 选择一个你喜欢的包管理器# NPM $ npm install element-plus --save# Yarn $ yarn add element-plus# pnpm $ pnpm install element-plus创建和挂载Vue应用 1. 完整导入 直接挂载就完了。 // main.ts import { cre…

假期别闲着:REST API实战演练之创建Rest API

1、创建实体类&#xff0c;模拟实体对象 创建一个类&#xff0c;模拟数据数据库来存储数据&#xff0c;这个类就叫Person。 其代码如下&#xff1a; package com.restful;public class Person {private String name;private String about;private int birthYear;public Perso…

【jQuery】jQuery框架

目录 1.jQuery基本用法 1.1选择器 1.2jQuery对象 1.3事件绑定 1.4链式编程 1.5过滤方法 1.6样式操纵 1.6属性操纵 1.7操作value 1.8查找方法 1.9类名操纵 1.10事件进阶 1.11触发事件 1.12window事件绑定 2.节点操作与动画 2.1获取位置 2.2滚动距离 2.3显示/隐…

HBase详解(4)

Phoenix 安装(续) 在HBase中添加配置&#xff0c;是的Phoenix支持二级索引 # 进入HBase的安装目录下 cd /opt/software/hbase-2.5.5/conf/ # 编辑文件 vim hbase-site.xml 在文件中添加 <property><name>hbase.regionserver.wal.codec</name><value>o…