改变div大小echarts能自适应

最新推荐文章于 2024-07-23 13:00:00 发布

ClarenceCoder

最新推荐文章于 2024-07-23 13:00:00 发布

阅读量500

点赞数

文章标签： echarts 经验分享

本文链接：https://blog.csdn.net/qq_27841817/article/details/119817675

版权

改变窗口大小，图表自适应很好实现

window.onresize = myChart.resize;

但是如果是改变div大小，需要实现图表的自适应怎么解决？

完整代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				width: 400px;
				height: 400px;
				background-color: #ccc;
				margin: 100px auto;
			}
			.box.max{
				position: fixed;
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
				margin: 0;
			}
			
			#main {
				width: 100%;
				height: 100%;
			}
			.btns{
				position: fixed;
				top:0;
				left: 0;
				height: 100px;
				width: 100%;
				background-color: rgba(0,0,0,.5);
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div id="main">
			</div>
		</div>
		<div class="btns">
			<button>改变div大小</button>
		</div>
	</body>
	<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var myChart = null;

		initChart();
		
		// 获取元素
		var btn =document.querySelector('button');
		var box = document.querySelector('.box');
		btn.onclick = function(){
			box.classList.add('max');
                   // 关键就是这行代码
                    $(window).trigger('resize');
		}

		function initChart() {
			if(myChart != null && myChart != "" && myChart != undefined) {
				myChart.dispose();
			}
			myChart = echarts.init(document.getElementById('main'));
			var option = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: 'bar'
				}]
			};

			myChart.setOption(option);
			// 图表自适应
			window.onresize = myChart.resize;
		};
	</script>

</html>

总结:

关键代码$(window).trigger('resize');触发窗口大小改变事件

ClarenceCoder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改变div大小echarts能自适应

改变窗口大小，图表自适应很好实现window.onresize = myChart.resize;但是如果是改变div大小，需要实现图表的自适应怎么解决？完整代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0;
复制链接

扫一扫