Echarts宽度自适应

背景：

当页面宽度变化时，echarts没有随着页面宽度变化而变化，需要手动刷新才能重绘，这样效果不好。以下介绍实现echarts宽度自适应的方法。

无自适应效果：

 自适应效果：

 实现思路：

echart图表本身提供了一个resize的函数，我们只需要监听页面的resize变化以后，去执行echarts的resize方法即可重绘canvas，从而实现对应自适应效果

实现步骤： 

在页面初始化加载的时候，绑定页面resize事件监听。resize事件是在浏览器窗口大小改变时触发。

mounted() {
        window.addEventListener('resize', () => {
            if (this.$refs.myChart) {
                this.$refs.myChart.resize();
            }
        })
},

beforeDestroy () {
      /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦 */
      window.removeEventListener('resize', () => {
        this.myChart.resize()
      })
    }

 或者另一种写法