解决Tab切换echarts图表不能正常显示问题：
// 绘图div父容器的宽度 let w = $('.figure').width(); $('#fig-t').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果 $('#fig-f').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果 $('#fig-e').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果 fig_t = echarts.init(document.getElementById('fig-t'), 'white', {renderer: 'canvas'}); fig_f = echarts.init(document.getElementById('fig-f'), 'white', {renderer: 'canvas'}); fig_e = echarts.init(document.getElementById('fig-e'), 'white', {renderer: 'canvas'});
上面只是解决了Tab页切换导致的图表显示问题，
由于是在图表初始化的时候设置了容器宽度，图表并不能随窗口缩放自适应，下面是解决方法：
window.onresize = function () { // 绘图div父容器的宽度 let w = $('.figure').width(); $('#fig-t').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果 $('#fig-f').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果 $('#fig-e').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果 if ((typeof fig_t) !== "undefined" && fig_t.dispose) { // ECharts随窗口大小改变而自适应 fig_t.resize(); } if ((typeof fig_f) !== "undefined" && fig_f.dispose) { // ECharts随窗口大小改变而自适应 fig_f.resize(); } if ((typeof fig_e) !== "undefined" && fig_e.dispose) { // ECharts随窗口大小改变而自适应 fig_e.resize(); } };
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/119531.html原文链接：https://javaforall.net
![Postman安装与简单使用[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
