Echarts响应式加载（根据窗口大小自动调整图表大小）

项目背景是这样滴：页面左右布局，各有一个echarts图表，本来完事了。但是缩小窗口（改变宽度后）发现图表没有跟随改变，就很难看。然后就想着让图表跟随窗口宽度自动调整，随时都是占50%；

下面上代码：

定义变量获取窗口大小：

import * as echarts from 'echarts'
data(){
    return{
        screenWidth: document.body.clientWidth,
    }
}

mounted(){
window.onresize = () => (() => {
    window.screenWidth = document.body.clientWidth;
    this.screenWidth = window.screenWidth;
})();
this.init();
},

methods：{
    init() {
      this.countSize();
    },
    countSize(){
      this.width = this.$refs.echartsBox.$el.clientWidth;//获取外围盒子大小，也可以用js获取
      var myEcharts = echarts.init(document.getElementById('echarts'));
      myEcharts.resize();//执行重绘方法
    },
}

视图：

style="{'width':width}"

思路： 监听窗口宽度，如果窗口宽度有变化就改变width的值，因为我的图标外面使用el-col 12包围的，也就是说本身外层盒子已经是响应式的，只是图表不跟随父类盒子走，那么狂口变化的时候获取响应式的父类盒子大小，同时把值赋给图表，然后重绘就完事了。