在el-tabs中使用ECharts图表，切换tab时，图表显示错乱-摩杜云开发者社区

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

BXnldh6dDlk1 2023年11月28日 24 0

Vue element-plus Vue element-plus echarts 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时，图表显示错乱_vue_04

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

上一篇： “超市陆战王”大润发亏损，给传统超市什么启示？下一篇：无涯教程-MySQL - 备份数据

最后一次编辑于 2023年11月28日 0

暂无评论

推荐阅读

Vue3 除了 keep-alive，还有哪些页面缓存的实现方案

wPQfeMurNjxT 2024年05月08日 57 0 0 Vue

vue3早已具备抛弃虚拟DOM的能力了

3A8RnFxQCDqM 2024年05月08日 49 0 0 Vue

Vue模板语法、属性绑定、条件渲染的学习

hCqS9nAImRxU 2024年05月17日 50 0 0 Vue

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

uCg8iP04yNRs 2024年05月17日 47 0 0 Vue

浅谈Vue.js与原生开发

gYl4rku9YpWY 2024年05月17日 57 0 0 Vue

如何判断一个js对象是否存在循环引用

uCg8iP04yNRs 2024年05月08日 55 0 0 Vue

Vue项目中有封装过axios吗？主要是封装哪方面的？

uCg8iP04yNRs 2024年05月17日 29 0 0 Vue

十分钟，带你了解 Vue3 的新写法

wPQfeMurNjxT 2024年05月08日 55 0 0 Vue

终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的

3A8RnFxQCDqM 2024年05月20日 58 0 0 Vue

你是怎么理解ES6中 Promise的？使用场景？

uCg8iP04yNRs 2024年04月30日 50 0 0 Vue

Vue列表过滤与排序

JZjRRktyDDvK 2024年05月02日 77 0 0 Vue

一款极简的聊天应用

VlNAKfyhjjp9 2024年04月30日 69 0 0 Vue

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

hGgw0bajsGf1 2024年05月18日 85 0 0 Vue

Vue3+Ts i18n实现国际化

JNTrZmaOQEcq 2024年04月30日 51 0 0 Vue

实现抖音 “视频无限滑动“效果

Wo2WjWKSubMZ 2024年05月17日 47 0 0 Vue

你是怎么处理vue项目中的错误的？

uCg8iP04yNRs 2024年05月17日 51 0 0 Vue

VUE-局部使用

onf2Mh1AWJAW 2024年05月17日 57 0 0 Vue

vue3编译优化之“静态提升”

3A8RnFxQCDqM 2024年05月17日 51 0 0 Vue

我为什么还要造一个前端轮子？

0LYBELHOQl6a 2024年05月17日 57 0 0 Vue

说说webpack proxy工作原理？为什么能解决跨域?

uCg8iP04yNRs 2024年05月17日 46 0 0 Vue

BXnldh6dDlk1

作者其他文章更多

使用Vue和Element UI进行文件上传的简单教程

2023-12-10

Vue组件中的父子组件传值详解

2023-12-09

在HTML或者JSP中使用Element Plus

2023-12-08

Vue中的文件和文件夹命名规范

2023-12-08

在HTML中使用ECharts创建交互式图表

2023-12-07

一篇文章理清什么是防抖、节流

2023-12-06

【Git知识】Git tag与branch有什么区别？

2023-12-06

FeignClient Https请求怎么禁用ssl证书校验？

2023-12-01

【个人理解】什么是Node.js、V8引擎、事件驱动、非阻塞式I/O

2023-11-30

response.getWriter()需要关闭流吗？

2023-11-30