vue中实现echart画布适配

业务需求：根据屏幕大小，将echart进行适配，同时可以解决首次渲染echart画布大小和刷新时画布大小不统一的问题

1.实现效果如下：
随着屏幕大小，echart画布进行适配

2.主要代码如下：

 <div class="echart-card" >
     <div class="echart-container">
        <div ref="cpuEChart"></div>
     </div>
 </div>

 mounted() {
  //一进来需要初始化一下画布大小
  this.resizeEcharts()
  //屏幕有变化了就需要出发画布适配的方法
  window.addEventListener(
      'resize',
      () => {
        this.resizeEcharts()
      },
      false
    )
}
methods:{
    //echrt画布宽度初始化及画布适配
    resizeEcharts() {
      let echartContainer = document.getElementsByClassName('echart-container') //获取echart的dom,这里有四个，每一个都需要做适配
      for (let i = 0; i < echartContainer.length; i++) {
        echartContainer[i].style.width =
          document.querySelector('.echart-card').offsetWidth + 'px'
      }
      this.cpuEChart.resize() //echart 画布大小更改
    },
}，
// resize监听销毁，提高性能
beforeDestroy() {
    this.cpuEChart.clear()
},