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

﹏ヽ暗。殇╰゛Y 2022-12-20 02:59 237阅读 0赞

## 图表的自适应chart.resize() ##

有时候会遇到屏幕宽度在变化，而echarts的图表保持原宽度不变的情况：  
![在这里插入图片描述][70]

只需要在图表数据初始化函数之后，再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友们的纠正，多个图表的问题还在研究中……  
![在这里插入图片描述][70 1]

![在这里插入图片描述][70 2]

注意：容器div上如果写了绝对的高和宽度，就不好使了，可以写最小高宽如：

min-width: 500px; min-height: 400px;

[70]: /images/20221120/5e0c51ab04774f8797ceffece04e9724.png
[70 1]: /images/20221120/4ebc3b444f8c4212bfb0746ed7c67952.png
[70 2]: /images/20221120/a2c8be02b8a54e16b57cb57545b4a127.png