要使Echarts圖表自適應屏幕大小,可以遵循以下步驟:
1. 監聽窗口大小改變事件:
window.addEventListener('resize', function() {// 在這里重新渲染圖表
});
2. 獲取圖表實例:
var chart = echarts.init(document.getElementById('chart-container'));
其中,'chart-container'是包含圖表的容器元素的ID。
3. 重新渲染圖表:
在窗口大小改變事件的處理程序中,使用chart.resize()方法重新渲染圖表。這將根據新的容器大小自動調整圖表的尺寸。
window.addEventListener('resize', function() {chart.resize();
});
完整的示例代碼如下:
var chart = echarts.init(document.getElementById('chart-container'));// 渲染圖表
window.addEventListener('resize', function() {
chart.resize();
});
確保在圖表初始化后立即執行一次chart.resize(),以便在加載時自適應初始屏幕大小。
這樣,當用戶調整瀏覽器窗口大小時,Echarts圖表會自動重新渲染并適應新的屏幕大小。