天天看點
傳回

改變div大小echarts能自适應

改變視窗大小，圖表自适應很好實作

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');觸發視窗大小改變事件

echarts 經驗分享
上一篇: Scala容器與Java容器的互相轉換
下一篇: Android改變字型大小，适應區域寬度Android改變字型大小，适應區域寬度

繼續閱讀