首页 > 其他分享 >在el-tabs中使用ECharts图表，切换tab时，图表显示错乱

在el-tabs中使用ECharts图表，切换tab时，图表显示错乱

时间：2023-11-27 19:05:22浏览次数：29

标签：el tabs 图表 tab 使用 ECharts

今天在el-tabs使用ECharts时，发现个问题，在不同tab页绘制不同的图表，默认tab页显示的图表，显示正常，但切换到其他tab标签，其他的图表显示错误，像下面这样在el-tabs中使用ECharts图表，切换tab时，图表显示错乱_echarts

在el-tabs中使用ECharts图表，切换tab时，图表显示错乱_element-plus_02

其实原因就是切换选项卡时，el-tabs使用的是display来控制的，这个属性会使ECharts无法获取容器宽度导致显示错误。解决这个问题有两种方法：

使用固定宽高（找到你要绘制图表的div，设置width和height）
切换tab页时，使用v-if做判断，并重新渲染图表；

在el-tabs中使用ECharts图表，切换tab时，图表显示错乱_echarts_03

可以使用nextTick也可以使用setTimeout

在el-tabs中使用ECharts图表，切换tab时，图表显示错乱_echarts_04

在el-tabs中使用ECharts图表，切换tab时，图表显示错乱_element-plus_05

标签：el,tabs,图表,tab,使用,ECharts
From： https://blog.51cto.com/u_16385820/8587548

相关文章

解锁 ElasticJob 云原生实践的难题
发生了什么最近在逛ElasticJob官方社区时发现很多小伙伴都在头疼这个ElasticJob上云的问题，ElasticJob本就号称分布式弹性任务调度框架，怎么在云原生环境就有了问题了呢，这就要从Kubenertes和ElasticJob的一些状态化说起。有意思的状态在了解两者特性之前我们可以先来看下......
HTMLElement: offsetParent property
HTMLElement:offsetParentpropertyTheHTMLElement.offsetParentread-onlypropertyreturnsareferencetotheelementwhichistheclosest(nearestinthecontainmenthierarchy)positionedancestorelement.Apositionedancestoriseither:anelementwit......
软件测试/人工智能|探究 LangChain 核心模块：PromptsModelsParsers
简介LangChain是一种新兴的语言处理平台，其核心模块之一即PromptsModelsParsers。这一模块扮演着关键的角色，为LangChain的功能和性能提供了坚实的基础。在这篇文章中，我们将深入探讨PromptsModelsParsers模块的工作原理、功能和其对语言处理的重要性。什么是PromptsModels......
Excel 条件格式
效果开始->条件格式->数据条->渐变填充开始->条件格式->新建规则->数据条->渐变填充......
powershell 语句
获取桌面路径：[System.Environment]::GetFolderPath("Desktop") 获取当前用户的桌面路径： [Environment]::GetFolderPath("Desktop") 如果要获取其他文件夹的路径，可以使用不同的文件夹名称来替换"Desktop"。例如，要获取"MyDocuments"文件夹的路径，可以使用"MyDocuments"......
el-tbs 权限控制
1.需求需求：实现一个el-tabs的权限控制，只有管理员才能操作，普通用户既看不到也不能操作2.分析一般要实现按钮权限控制都是使用封装指令v-permission指令，但是类似“Tabs”这类组件不能使用v-permission指令实现权限控制。因为v-permission底层是实现dom的删除，而不......
selenium之三种等待，强制等待、隐式等待和显式等待
显式等待presence_of_element_locatedpresence_of_all_elements_locatedvisibility_of_any_elements_located 判断页面至少有一个元素可见visible，传入locator，一旦定位就返回thelistoflocatedWebElements；不可见（元素隐藏或是完全不存在，一个都没有）返回的是......
selenium之鼠标键盘操作
鼠标操作1.引入ActionChains类2.定位相关元素3.在ActionChains().调用相关鼠标操作方法fromselenium.webdriver.common.action_chainsimportActionChains双击操作：ActionChains(driver).double_click(对应元素).perform()右击操作：ActionChains(driver).context_click(对......
Rancher五--在SELinux模式下安装Rancher-RHEL/CentOS
在SELinux模式下安装Rancher-RHEL/CentOS从1.6+版本后支持为了使Rancher在RHEL/CentOS的SELinux模式下正常工作，您需要在安装有RPM包container-selinux-2.14(或更高的版本)的主机上运行RancherServer容器。同时，全部的agent主机也要安装这个包。如果您安装了较低版本的container-sel......
numpy.ravel()和numpy.flatten() 区别
numpy.ravel()和numpy.flatten()都可以将多维数组转换为一维数组，但它们之间存在一些重要的区别：numpy.flatten()返回的是原数组的副本，这意味着对flatten()返回的数组进行修改不会影响原数组。numpy.ravel()返回的是原数组的视图（如果可能的话），这意味着对ravel()返回的数组进行修改可能......

赞助商

阅读排行