echarts图表自适应

项目场景：

图表根据分辨率的大小和浏览器的百分比自适应

---

问题描述：

图表在浏览器100%的时候正常显示，但是一旦改变百分比或者改变电脑的分辨率，图表就不会自适应。

window.onresize = function () {
    myChart.resize();
 };

之前用的都是这个方法，但现在不适用 

解决方案：

通过监听浏览器的宽高自适应

//初始化浏览器宽高
 screenWidth: document.body.clientWidth,
 screenHeight: document.body.clientHeight,
//myChart是echarts.init(document.getElementById('main')
 myChart: null,


//监听浏览器宽高
  watch: {
    screenWidth() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    screenHeight() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
  },



//setOption之后
option && this.myChart.setOption(option);
window.addEventListener("resize", () => {
        //使用resize监听方法
this.screenWidth = document.body.clientWidth; //给存储的变量screenWidth赋当前窗口的宽度
window.innerWidth = this.screenWidth;
this.screenHeight = document.body.clientHeight; //给存储的变量screenHeight赋当前窗口的高度
 window.innerHeight = this.screenHeight;
 });