你是不是也遇到過這樣的尷尬？在手機上看圖表正常，一到電腦端就擠成一團，或者頁面一刷新，echarts圖直接“躺平”——寬高不對、內容變形、體驗極差。別急，今天這篇《Echarts寬高自適應》問答式干貨，專治各種“不聽話”的圖表！
Q1：為什么echarts圖表不自適應？
因為echarts默認是固定寬高（比如 600px × 400px），一旦容器大小變化，它不會自動調整。就像你穿了一件尺碼固定的西裝，走進不同尺寸的房間，自然格格不入。
Q2：怎么讓它“懂你”？有真實案例嗎？
當然有！我之前寫一個數(shù)據(jù)可視化項目，用echarts展示用戶活躍趨勢。一開始寫死寬高，結果在iPad上變成小方塊，根本看不清。后來我用了這個方法：
javascript// 初始化時獲取容器寬高const chartDom = document.getElementById('main');const myChart = echarts.init(chartDom);// 監(jiān)聽窗口變化，動態(tài)重繪window.addEventListener('resize', () => { myChart.resize();});// 頁面加載完成后首次渲染setTimeout(() => { myChart.resize();}, 100);效果立竿見影！無論你在iPhone、MacBook還是平板上打開，圖表都完美適配，像量身定制一樣貼合屏幕。
Q3：有沒有更優(yōu)雅的方案？
有！我推薦用CSS + JS結合的方式，讓容器本身響應式：
然后JS里只初始化一次，不需要頻繁resize，性能更好。關鍵是：用`height: 100%`而不是固定像素，這樣父級容器變了，子圖跟著變。
Q4：適合發(fā)朋友圈/小紅書嗎？
太適合了！我曾把這段代碼+截圖發(fā)在小紅書，標題就是《我終于搞懂了echarts自適應！再也不怕圖表變形了》，點贊破百！評論區(qū)全是“求源碼”“學到了！”——這就是真實用戶的共鳴。
總結一句話：echarts不是不能自適應，是你沒給它“呼吸的空間”。記得加resize監(jiān)聽 + 容器百分比布局，輕松搞定移動端和PC端雙適配！
下次寫文章或做數(shù)據(jù)報告，不妨試試這個技巧——讓你的圖表，真正“會說話”！?
