echarts图表在Tab页中width: 100%失效导致的第一个Tab页之后的Tab页图表不能正常显示的问题
解决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(); } };
作者:jsp
-------------------------------------------
个性签名:无论在哪里做什么,只要坚持服务、创新、创造价值,其它的东西自然都会来的。
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!
标签:
JavaScript
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现