antd option寬度自适應_項目中常用的vue代碼總結（echarts圖表寬度自适應問題）

最近有統計分析的需求，用的echarts，随便找了一個柱狀圖的例子試了試

需求要求圖表随着浏覽器的大小而動态改變

解決：

網上有說rem或者vw（相對于視口的寬度，視口被均分為100機關的vw），這種給寬度的方式隻能第一次進頁面的時候有效，達不到随着浏覽器的大小而動态改變寬度；然後想到使用window.onresize監聽浏覽器的寬度，利用擷取dom的方法給echarts寬度

window.onresize = function () {
      document.getElementsByClassName("main-echarts")[0].style.width = `${window.innerWidth}px`;
};
           

這樣寫之後雖然能給到表格寬度但是不能重新加載表格，需要調用

_this.myChart.resize();
           

是以

window.onresize = function () {
      document.getElementsByClassName("main-echarts")[0].style.width = `${window.innerWidth}px`;
      _this.myChart.resize();
};
           

解決。

window.addEventListener("resize", function () {
      _this.myChart.resize();
});
           

這樣也是可以的