echarts图表随屏幕的宽度自适应

图表的自适应chart.resize()

有时候会遇到屏幕宽度在变化,而echarts的图表保持原宽度不变的情况:
在这里插入图片描述
只需要在图表数据初始化函数之后,再resize()下就可以了。
代码示例:

<div class="chart_box">
	<div id="twChart" class="twChart"></div>
</div>
<script>
$(function(){
	option = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['反馈','已审核','已上报']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['1月','2月','3月','4月','5月']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'反馈',
		            type:'line',
		            stack: '总量',
		            data:[120, 132, 101, 134, 90]
		        },
		        {
		            name:'已审核',
		            type:'line',
		            stack: '总量',
		            data:[220, 182, 191, 234, 290]
		        },
		        {
		            name:'已上报',
		            type:'line',
		            stack: '总量',
		            data:[150, 232, 201, 154, 190]
		        }
		       
		    ]
		};
	var twChart = echarts.init(document.getElementById('twChart'));
	twChart.setOption(option);
	setTimeout(function (){
	    window.onresize = function () {
	    	twChart.resize();
	    }
	},200)

})
</script>

图表就可以自适应了
谢谢c友们的纠正,多个图表的问题还在研究中……
在这里插入图片描述
在这里插入图片描述

评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值