tab按钮切换后echarts宽高显示错误

文章目录

• 前言
• 一、如何解决？
• 二、解决方案
• 总结

前言

3 个 tab 按钮对应 3 个 echarts 图表，点击 tab 显示对应 echarts 图表，当点击 tab 后，因为未显示的 echarts 图表获取的宽高错误，所以点击后显示的 echart 图表是一个错误宽高的图表。

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何解决？

监听 tab 点击事件，当点击图表时，重新获取容器宽高，最后重新绘制下图表，或者重置下尺寸就可以了。

二、解决方案

如果在 Bootstrap 的标签页切换后，echarts 图表的宽高错误，可能是因为在初始化 echarts 图表时，未正确处理图表容器的宽高变化。可以尝试以下几个步骤来解决这个问题：

1. 使用 echarts 的 resize() 方法：在 Bootstrap 标签页切换后，在相应的事件或回调函数中调用 echarts 实例的 resize() 方法。这将重新计算图表容器的宽高，确保图表正常显示。例如：

// 在标签页切换后调用 resize