tab下echarts图表容器宽度设置100%无效

最新推荐文章于 2025-05-13 11:34:16 发布

yux_84

最新推荐文章于 2025-05-13 11:34:16 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_41936629/article/details/107336339

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种解决在iframe中嵌入Vue开发的页面时，ECharts图表显示变形的问题方法。通过在切换到目标tab页时重新赋值iframe的src属性，确保图表初始化时正确获取容器宽度。

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

背景

客户的一个系统用 iframe 嵌入我们系统的一个页面（我们是用 Vue 开发的），这个 iframe 是放在 tab 页签下的，结果发现我们页面下的 echarts 图表变形了，内容全挤在一起。如下图：
在这里插入图片描述

解决办法

上网查找问题原因和解决办法，这篇文章把原因说得挺清楚的：
echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起
在这里插入图片描述
网上的一些方法（非iframe）：
方法一：
找一个在tab页的切换操作中不会隐藏的父容器，把它的宽度的具体值取出后在初始化图表之前直接赋给图表：原文

方法二：
mounted 方法中监听 window 的 resize 事件：原文

我自己的方法：
由于我的页面是通过 iframe 内嵌进去的，问题原因也是父元素被隐藏，echarts 初始化无法正常获取容器宽度，那我想是不是可以在切换到该 tab 页签时再给 iframe 的 src 赋值呢？试了一下还真可以。
简单示例：

<div>
    <ul>
        <li>tab1</li>
        <li>tab2</li>
    </ul>
    <div id="tabCon1">1</div>
    <div id="tabCon2" style="display: none;">
        <iframe id="viewFrame" src="#" frameborder="0" width="100%" height="600px"></iframe>
    </div>
</div>
<script>
    window.onload = function() {
        var liArr = document.querySelectorAll('li');
        liArr[0].onclick = function() {
            document.getElementById('tabCon2').style.display = 'none';
            document.getElementById('tabCon1').style.display = 'block';
        }
        liArr[1].onclick = function() {
            document.getElementById('viewFrame').src = 'xxxxxxxxxxx';
            document.getElementById('tabCon1').style.display = 'none';
            document.getElementById('tabCon2').style.display = 'block';
        }
    }
</script>