解决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(); } };
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/119531.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
