Echarts动态设置宽高resize()的使用及注意点

最新推荐文章于 2023-12-20 10:19:12 发布

入门咖啡

最新推荐文章于 2023-12-20 10:19:12 发布

阅读量1.4w

点赞数 3

分类专栏： Echarts宽度自适应

本文链接：https://blog.csdn.net/qq_42447856/article/details/109261392

版权

1024程序员节

Echarts宽度自适应专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts动态设置宽高resize()

今天在项目中遇到了Echarts宽高自适应问题，几经波折终于把问题解决了，下面直接上代码：

// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById("main"));
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
		// window.onresize = function () {
		// 	myChart.resize();
		// }
		window.addEventListener("resize", function () {
		    height= $(window).height();//浏览器的高度 
		    myChart.getDom().style.height = this.height+ "px";
			myChart.resize();
		});

其中如果不写一下代码会出现高度为“0”的问题，这问题困扰我很久。

 height= $(window).height();//浏览器的高度 
 myChart.getDom().style.height = this.height+ "px";

当然也可以使用下面这种方法：

window.onresize = function () {
	height= $(window).height();//浏览器的高度 
	myChart.getDom().style.height = this.height+ "px";
	myChart.resize();
}

当页面有多个echarts时使用addEventListener，页面中有一个echarts使用onresize。最后贴一下我的完整代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>平整度PQI</title>
	<link rel="stylesheet" href="../../js/layui/css/layui.css" />
	<script type="text/javascript" src="../../js/echarts/echarts.min.js"></script>
	<!-- <script type="text/javascript" src="../../js/hcharts/modules/exporting.js"></script> -->
	<script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../js/config.js"></script>
	<script type="text/javascript" src="../../js/layui/layui.js"></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<style type="text/css">
		html,
		body {
			height: 94%;
		}

		body {
			width: 96%;
			margin-left: 2%;
		}

		.searchDiv {
			width: 100%;
			background: #fff;
			border-radius: 6px;
			margin-top: 10px;
			padding-top: 5px;
			padding-bottom: 13px;
			position: relative;
			box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
		}
		.chart_box{
			width: 100%;
			height: 100%;
			margin: 0 auto;
		}

	</style>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="chart_box">
		<div id="main" class="main"></div>
	</div>
	<script>
		
		
	    // 指定图表的配置项和数据
	    var timeData = [
	        ['K0+000',92.01752395994401],['K0+100',94.41680058059887],['K0+200',94.51690258003522],
	        ['K0+300',95.47765761019392],['K0+400',94.19067453695466],['K0+500',94.99757507671596],
	        ['K0+600',95.35693076925763],['K0+700',93.92247663659853],['K0+800',93.71836575826592],
	        ['K0+900',94.68277405922969],
	        ['K1+000',92.56232552529856],['K1+100',93.72955245371271],
	        ['K1+200',93.89243379737894],['K1+300',92.82839328035467],['K1+400',95.59801616751834],
	        ['K1+500',94.51031719836116],['K1+600',94.3427163168764],['K1+700',95.57975693678478],
	        ['K1+800',93.8493935850764],['K1+900',91.49034788231211],
	        ['K2+000',93.83197677761953],
	        ['K2+100',95.40819317211324],['K2+200',93.93025566074351],['K2+300',96.20912120728636],
	        ['K2+400',91.26285809911494],['K2+500',94.48395299572667],['K2+600',94.17341073679233],
	        ['K2+700',94.41414513382168],['K2+800',95.13962908136314],['K2+900',95.07437676398958],
	        ['K3+000',88.22024909816928],
	        ['K3+100',95.61276204679679],['K3+200',95.6856754966696],['K3+300',94.98373853770063],
	        ['K3+400',94.56375026586436],['K3+500',90.22270205154712],['K3+600',94.39499037390935],
	        ['K3+700',93.50129089894338],['K3+800',94.29612631237548],['K3+900',94.18655920063797],
	        ['K4+000',94.81530813906906],
	        ['K4+100',94.63179864256453],['K4+200',93.23563652516384],['K4+300',92.85775964545032],
	        ['K4+400',95.33110738152101],['K4+500',95.15622593967682],['K4+600',93.11657865165435],
	        ['K4+700',94.09980845847885],['K4+800',93.82440619288724],['K4+900',94.84988486262172],
	        ['K5+000',92.32319480994794],
	        ['K5+100',93.17158227207254],['K5+200',95.07229146493135],['K5+300',72.28460422334017],
	        ['K5+400',96.70206967893753],['K5+500',87.15246171922549],['K5+600',63.087356003549985],
	        ['K5+700',94.60821120400567],['K5+800',94.38448218384406]
	    ];
	    
	    var option = {
	        title: {
	            text: 'RQI'
	        },
	        tooltip: {
	            trigger: 'axis',
				// formatter:function(timeData) {
				// 	return timeData[1].toFixed(2);
				// 	//或者是下面这种，效果是一样的
				// 	//return datas.value.toFixed(2);
				// }
	        },
	        xAxis: {
	            type: 'category',
	            boundaryGap: false,
	            axisLine: {onZero: true},
	            data:  timeData.map(function (item) {
	                    return item[0];
	            })
	        },
	        yAxis: {
	            splitLine: {
	                show: false
	            },
	            min:50
	        },
	         toolbox: {
	                left: 'center',
	                feature: {
	                    dataZoom: {
	                        yAxisIndex: 'none'
	                    },
	                    restore: {},
	                    saveAsImage: {}
	                }
	            },
	        axisPointer: {
	            link: {xAxisIndex: 'all'}
	        },
	         dataZoom: [{
	            startValue: 'K0',
	        }, {
	            type: 'inside'
	        }],
	        visualMap: {
	            top: 10,
	            right: 10,
	            //可以使用 lt（小于，little than），gt（大于，greater than），
	            //lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）
	            //来表达边界：
	            pieces: [{
	                lt: 60,
	                color: '#096'
	            }, {
	                gte: 60,
	                lt: 70,
	                color: '#ffde33'
	            }, {
	                gte: 70,
	                lt: 80,
	                color: '#ff9933'
	            }, {
	                gte: 80,
	                lt: 90,
	                color: '#cc0033'
	            }, {
	                gte: 90,
	                // lte: 300,
	                color: '#660099'
	            }, 
	            // {
	            //     gt: 300,
	            //     color: '#7e0023'
	            // }
	            ],
	            outOfRange: {
	                color: '#999'
	            }
	        },
	        series: {
	            name: 'RQI',
	            type: 'line',
	            data: timeData.map(function (item) {
	                    return item[1];
	            }),
	            markLine: {
	                silent: true,
	                data: [{
	                    yAxis: 60
	                }, {
	                    yAxis: 70
	                }, {
	                    yAxis: 80
	                }, {
	                    yAxis: 90
	                }]
				}
	    
			}
	    };
	
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById("main"));
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
		window.onresize = function () {
			height= $(window).height();//浏览器的高度 
			myChart.getDom().style.height = this.height+ "px";
			myChart.resize();
		}
		// window.addEventListener("resize", function () {
		//     height= $(window).height();//浏览器的高度 
		//     myChart.getDom().style.height = this.height+ "px";
		// 	myChart.resize();
		// });
	</script>
</body>

</html>

直接粘代码的注意引入的文件层级