注册窗口onresize事件实现动态改变canvas渲染图大小

最新推荐文章于 2024-08-12 15:19:38 发布

「已注销」

最新推荐文章于 2024-08-12 15:19:38 发布

阅读量1k

点赞数

文章标签： js 前端 bootstrap echarts

本文链接：https://blog.csdn.net/crime_and_punishment/article/details/103449246

版权

本文介绍了在Bootstrap环境下，针对ECharts图表在窗口缩放时无法自动调整大小的问题，如何通过监听window.onresize事件并利用jQuery动态修改canvas元素的尺寸，以实现饼图随着窗口大小变化而自适应。

摘要由CSDN通过智能技术生成

</div>

在进行bootstrap网页开发时页面中利用echarts渲染了一个饼图，结果发现在缩放时饼图会保持初始大小不会根据窗口改变而改变，此时想到通过注册window.onresize方法动态获取body的大小再利用jquery改变渲染的canvas的大小，代码如下：

html：

<div class=" col-md-2 col-lg-2 col2_2">
					<div>
						<h5 class="title">综合检查</h5>
						<div class="top">
							<div id="chart2"></div>
						</div>
						<div class="bottom">
						</div>
						<div class="detail" title="点击查看详情"><span class="glyphicon glyphicon-fullscreen"></span></div>
					</div>
				</div>
<!-部分代码，渲染在#chart2中->

js：