设置display：none属性时，导致echarts图表宽度错误

最新推荐文章于 2023-02-06 18:00:27 发布

Lynjiao

最新推荐文章于 2023-02-06 18:00:27 发布

阅读量810

点赞数

分类专栏：语言文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Lyn425486/article/details/128218287

版权

语言专栏收录该内容

20 篇文章 0 订阅

订阅专栏

设置display：none属性时，导致echarts图表宽度错误
原因：echarts容器初始化时的display为none，导致echarts初始化时获取不到容器的宽度
解决方法：网上百度的方法 1.给盒子设置固定宽度（测试不行）
2.display:none设置为visibility:hidden（可以正确显示但是不满足业务要求）
3.使用this.$nextTict();（在节点渲染完成后再去渲染echarts图表）

 this.$nextTick(() => {
                let myEchart = this.$echarts.init(document.getElementById("iconContent"));
            myEchart.setOption(option);
            });