echarts图表随屏幕的宽度自适应-蒲公英云

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>