After the tab button is switched, the echarts width and height are displayed incorrectly

---

foreword

The 3 tab buttons correspond to 3 echarts charts, click the tab to display the corresponding echarts chart, when the tab is clicked, because the width and height of the undisplayed echarts chart are wrong, the echart chart displayed after clicking is a chart with a wrong width and height.

---

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

1. How to solve it?

Listen to the tab click event. When the chart is clicked, reacquire the width and height of the container, and finally redraw the chart or reset the size.

Two, the solution

If the width and height of the echarts chart are wrong after the Bootstrap tab is switched, it may be because the width and height of the chart container were not correctly handled when the echarts chart was initialized. You can try the following steps to resolve this issue:

1. Use the resize() method of echarts: After switching the Bootstrap tab, call the resize() method of the echarts instance in the corresponding event or callback function. This will recalculate the width and height of the chart container to ensure the chart displays properly. For example:

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