vue tab切换echars宽度不对，显示100px问题

最新推荐文章于 2024-03-27 13:57:16 发布

布袋里长出了橘猫

最新推荐文章于 2024-03-27 13:57:16 发布

阅读量664

点赞数

CC 4.0 BY-SA版权

分类专栏： elementUI vue echars 文章标签： echars 前端 vue element javascript

本文链接：https://blog.youkuaiyun.com/qq_37617413/article/details/100708092

vue 同时被 3 个专栏收录

13 篇文章

订阅专栏

elementUI

5 篇文章

订阅专栏

echars

1 篇文章

订阅专栏

本文介绍了一种解决Vue中Echarts图表宽度显示错误的方法。当使用el-tab-pane组件切换时，Echarts图表的宽度可能会固定为100px。通过获取外层元素宽度并动态设置Echars宽度，再在切换tab时重绘图表，有效解决了这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue tab切换echars宽度不对，显示100px问题

使用vue的el-tab-pane组件，切换到第二个组件的时候，底下的echars图宽度显示为100px
- 第一步：获取外层元素的宽度，赋值给echars
- 第二步：切换到第二个tab栏的时候，重绘图表，

使用vue的el-tab-pane组件，切换到第二个组件的时候，底下的echars图宽度显示为100px

网上搜的乱七八糟的onsize什么的没看懂，用的简单粗暴地方法，如有问题请指正~
一共分两步：

第一步：获取外层元素的宽度，赋值给echars

	let _width = document.getElementById("tab_box").offsetWidth;
    let lineChars = document.getElementById("line_chars");
    lineChars.style.width = _width + "px";
    let myChart = document.getElementById("tab_box");

第二步：切换到第二个tab栏的时候，重绘图表，

	handleClick(tab, event) {
      if (tab.index == 1) {
        this.$nextTick(this.drawLineChars());
      }
    },

如有问题请联系我~

欢迎加入QQ群:
在这里插入图片描述