Echart图表无法铺满外部容器的原因

339 阅读1分钟

描述: 开发项目时,出现echart宽度异常,F12打开调试窗口在布局中发现canvas画布铺不满容器。

分析: 通常容器需要指定宽高,画布会自适应容器。其实通过指定绝对宽度即可解决该问题,但是我不想。。。后来发现因为页面使用了element的tab页组件且图表页是在第二个标签。当页面加载时会先进入第一标签,导致此时的图表页面并没有获取到容器的宽度。

解决: 采取折中方法,在父组件的tab上添加点击事件,当切换tab页将图表重刷新。