1、大屏正常，小屏超出

寬：1920px

寬：1550px

2、解決：使用echarts的resize()API （官網地址：https://echarts.apache.org/zh/api.html#%2Fsearch%2Fresize）

<div class="contentLeft"><div id="echartBox" ref="echartBox"></div> </div>data() {return {myChart: null}; }, mounted() {this.$nextTick(() => {// 獲取元素this.myChart = echarts.init(document.getElementById("echartBox"));// 請求數據，初始化圖表this.getBarData();})// 監聽屏幕寬度變化：當瀏覽器發生resize事件的時候，觸發echart的resize事件，重繪canvaswindow.addEventListener("resize", () => {this.changeWidth();}) }, methods: {changeWidth() {this.myChart.resize();}, }

3、注意：如果div是隱藏的，ECharts 可能會獲取不到div的高寬導致初始化失敗，這時候可以明確指定div的style.width和style.height，或者在div顯示后手動調用 echartsInstance.resize 調整尺寸。

4、報錯：Initialize failed: invalid dom. 這是因為元素未創建完成就渲染圖表（在vue中有時使用了v-if或者v-show而未進行判斷）

夢想因熱情而明亮，未來因拼搏而精彩！

總結

以上是生活随笔為你收集整理的echarts宽度随屏幕宽度改变自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。