echarts图表自适应窗口大小

设置为百分比布局的容器,默认情况下初始状态是显示正常的,但是改变了窗口大小,echarts图表并不会跟着改变大小,导致布局错乱,这时候就需要加以下这段代码

setTimeout(function() {
            window.onresize = function() {
                xzaj.resize();
            }
        }, 200)

以下是详细的代码结构

<div id="xzajchart" style="width: 98%; margin-left: 1%; height: 200px;"></div>

<script type="text/javascript">
		//全市各分局 行政案件 执法情况分析图表
		var xzaj = echarts.init(document.getElementById('xzajchart'));
		xzaj.setOption({
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器,坐标轴触发有效
					type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
				}
			},
			legend: {
				data: ['受案数', '24H未及时处理', '立案数', '24H未及时处理'],
				x: 'right',
				y: '15',
				textStyle: {
					color: '#fff',
					fontSize: '12',
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: ['周一', '周二', '周三', '周四', '周

猜你喜欢

转载自blog.csdn.net/u012720337/article/details/83652278