echarts超出容器宽度问题的解决办法

在使用vue+iview+echarts时，出现了echarts图标刷新页面会超出容器宽度的问题 如下图所示：

• html代码如下：

<a-col class="gutter-row" :span="6">
	<div class="gutter-box echarts_col">
	     <div class="echarts_top"><p>浏览量</p> <p>6666</p> </div>
	      <div id="myChart" :style="{minHeight: '80px'}"></div>
	      <div class="echarts_footer">
	          <span>日浏览量</span>
	          <span>月浏览量</span>
	      </div>
	</div>
</a-col>

js代码

 methods:{
        //浏览量
        drawLine(){
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            myChart.setOption({
                
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    show:false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    show:false,

                },
                grid: {
                    top: '15%',
                    left: '0%',
                    right: '0%',
                    bottom: '25%',
                },
                series: [{
                    data: [820, 1500, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {
                        color:'#d5e8fd', //图形填充得背景颜色
                    },
                  
                    lineStyle:{
                        color:'#3174f5'//区域填充样式。
                    },
                    symbol:'none', //取点折线圆点
                    smooth: 'true' //设置折线为弧形
                }]
            });
            window.addEventListener('resize', function () { myChart.resize();}
            )
        },
 },
 create(){
 	this.$nextTick(()=>{
        this.drawLine()
	})
 }

• 解决方法

 create(){
 	this.$nextTick(()=>{
        setTimeout(()=>{
      		  this.drawLine()
        },20)
	})
 }