美文网首页
echarts超出父容器范围和自适应的解决办法

echarts超出父容器范围和自适应的解决办法

作者: 幽小鬼 | 来源:发表于2022-01-25 10:53 被阅读0次

    给echarts图表设置100%宽高,父容器动态设置一个宽高时,echarts图表会占满不了父容器或者溢出父容器范围。

    产生问题的原因是因为echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度,然后改变容器宽高,导致echarts绑定的元素的宽度并不是最终的宽度,所以造成了获取到的结果并不是想要的。

    解决办法是延迟加载,等父容器设置完宽高以后echarts再进行渲染:

    mounted () {
            setTimeout(() => {
                this.initChart() // 绘制图表
            }, 0)
        }
    

    相关文章

      网友评论

          本文标题:echarts超出父容器范围和自适应的解决办法

          本文链接:https://www.haomeiwen.com/subject/trhwhrtx.html