溫馨提示×

echarts圖表自適應(yīng)屏幕大小

小云
279
2023-09-19 06:58:38
欄目: 編程語言

要使Echarts圖表自適應(yīng)屏幕大小，可以遵循以下步驟：

1. 監(jiān)聽窗口大小改變事件：

window.addEventListener('resize', function() {
  // 在這里重新渲染圖表
});

2. 獲取圖表實例：

var chart = echarts.init(document.getElementById('chart-container'));

其中，'chart-container'是包含圖表的容器元素的ID。

3. 重新渲染圖表：

在窗口大小改變事件的處理程序中，使用chart.resize()方法重新渲染圖表。這將根據(jù)新的容器大小自動調(diào)整圖表的尺寸。

window.addEventListener('resize', function() {
  chart.resize();
});

完整的示例代碼如下：

var chart = echarts.init(document.getElementById('chart-container'));
// 渲染圖表
window.addEventListener('resize', function() {
  chart.resize();
});

確保在圖表初始化后立即執(zhí)行一次chart.resize()，以便在加載時自適應(yīng)初始屏幕大小。

這樣，當(dāng)用戶調(diào)整瀏覽器窗口大小時，Echarts圖表會自動重新渲染并適應(yīng)新的屏幕大小。

0 踩