tab标签页切换时Echarts加载不正常的问题

柔光的暖阳◎ 2023-01-17 07:35 235阅读 0赞

### 切换tab选项卡时Echarts加载不正常的问题 ###

*  一、问题描述
 *  二、解决方案：
 *  三、拓展

# 一、问题描述 #

我有两个选项卡，一个用来显示Echarts图表，一个用来显示Echarts图表的数据源  
![在这里插入图片描述][20210427145101512.png]  
但是我切换到数据源的选项卡后再改变浏览器窗口大小时，这是再切换回echarts图表的选项卡就会出现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70]

> 可以看到，图形渲染失败了

# 二、解决方案： #

> 就是再次切换回图表选项卡的时候，调用restore()方法，将图表数据还原即可，那个tab-1是我图表选项卡中tab标签的id。

# 三、拓展 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70 1]  
参考链接：[https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html][https_www.runoob.com_bootstrap_bootstrap-tab-plugin.html]

[20210427145101512.png]: /images/20221021/a67dd68a512f4f22a740e27e15b0bb94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70]: /images/20221021/25d119d4a4ff47efb9bb7aca7e15b773.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUzNzI0_size_16_color_FFFFFF_t_70 1]: /images/20221021/83a1fe04a9264a5fb2443e406c5216d6.png
[https_www.runoob.com_bootstrap_bootstrap-tab-plugin.html]: https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html