关于echarts图表大小自适应标签容器,以及页面切换后resize(窗口大小改变)再回到含有echarts图的页面,echarts图无法显示,直到再次触发resize的问题解决

本文主要是介绍关于echarts图表大小自适应标签容器,以及页面切换后resize(窗口大小改变)再回到含有echarts图的页面,echarts图无法显示,直到再次触发resize的问题解决,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.echarts实现大小自适应包含它的标签容器
实现方式:监听window上的resize事件,在事件中执行echarts自带的resize方法
首先包含echarts的容器应该有初始的宽高,否则echarts无法显示。第二,为了使窗口缩放时,容器也跟着缩放,包含echarts的标签的宽高应该设置为百分比的形式(或其他布局形式,不要直接都定死),一般宽度设置为百分比,高度可以固定。
举例:

<template><div class="echart"><div class="echart1"><div class="echart2"></div></div>
</template><script>
export default {mounted() {let container1 = document.querySelector(".echart1");let echart1= this.$echarts.init(container1);let container2 = document.querySelector(".echart2");let echart2 = this.$echarts.init(container2);echart1.setOption(Option);echart2.setOption(Option2);window.addEventListener("resize", function () {echart1.resize();echart2.resize();});},
};
</script><style>
.echart {width: 100%;height: 500px;display: flex;
}
.echart1,
.echart2 {width: 49%;/* flex: 1; */margin: 0 1%;box-shadow: 0 0 10px #aaa;
}
</style>

这里的option没有写出来,可以自己根据情况而定,另外这里是在vue文件中写的,如果是在原生中把标签样式和js分开写就行。
2.为什么页面切换后,如果触发了window.onresize(即页面大小发生了改变),再回到当前页,echarts图无法显示需要在本页面再触发一次resize(缩放下窗口)才能正常展示
官方文档指出:
在这里插入图片描述
这里虽然没有隐藏标签但是情况和这个类似,所以解决方案就是在进入页面时让其触发echarts的resize方法。
这里是在vue中,且使用了keep-alive保存了当前组件状态,所以是在activated中触发的(如果没有keep-alive包裹当前组件或路由,那么可以在vue生命周期函数,如mounted中让其执行。)
在这里插入图片描述
注意上面的echart1就需要在全局或者data中定义了,初始值可以设置为undefined或者null
补充:上面的方式可能不会生效,报‘resize is not defined’的错,
更改代码
在这里插入图片描述

这篇关于关于echarts图表大小自适应标签容器,以及页面切换后resize(窗口大小改变)再回到含有echarts图的页面,echarts图无法显示,直到再次触发resize的问题解决的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/671215

相关文章

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出