Echarts 动态显示/隐藏图表导致图表绘制失败的解决方案

背景

开发中遇到这样的问题，使用Echarts图表展示一组数据，当缺失数据时，隐藏该图表。比如切换筛选条件，很有可能匹配不到以此没有数据返回，而改变筛选条件后，又得到了一组数据需要展示。但是，切换的过程中，明明是有数据返回需要展示的，但图表却是一片空白~

问题复现

应用代码

const chart = echarts.init(this.$refs.bar);
chart.setOption(this.option);

问题图

canvas里面宽度居然是0，问题就是在这里了，Echarts渲染失败。

官方的解释

Tip: 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用resize方法获取正确的高宽并且刷新画布，或者在opts中显示指定图表高宽。

 

解决方案

调用resize方法，重新获取容器的大小并绘制图表便可解决此问题

代码块

const chart = echarts.init(this.$refs.bar);
chart.setOption(this.option);
chart.resize();

图表的正常展示

官方文档

Echarts resize方法的使用说明 摸我