圖表容器和尺寸

在開始使用中，我們介紹了初始化 ECharts 的 API echarts.init。 API 文件介紹了每個參數的具體含義。在閱讀以下內容之前，請先閱讀並理解該文件。

參考幾個常見的使用場景，以下是如何初始化圖表並變更其大小的範例。

初始化

在 HTML 中定義父容器

一般來說，您需要定義一個 <div> 節點，並使用 CSS 來變更寬度和高度。初始化時，將圖表導入節點。不宣告 opts.width 或 opts.height 的情況下，圖表的大小將預設為節點的大小。

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

請注意，在呼叫 echarts.init 之前，您需要確保容器已經有寬度和高度。

指定圖表大小

如果容器的高度和寬度不存在，或您希望圖表大小與容器不相等，您可以在開始時初始化大小。

<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

容器大小的反應性

監聽容器大小以變更圖表大小

在某些情況下，我們希望在容器大小變更時相應地變更圖表大小。

例如，容器的高度為 400px，寬度為網站寬度的 100%。如果您希望在網站寬度變更的同時，圖表寬度保持為網站寬度的 100%，請嘗試以下方法。

您可以監聽網站的 resize 事件，以捕獲瀏覽器調整大小的事件。然後使用 echartsInstance.resize 來調整圖表大小。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>

提示：有時我們可能會透過 JS/CSS 調整容器大小，但這不會變更頁面大小，因此不會觸發 resize 事件。您可以嘗試使用 ResizeObserver API 來涵蓋這種情況。

宣告特定的圖表大小

除了呼叫沒有參數的 resize() 之外，您可以宣告高度和寬度，以實現圖表大小與容器大小不同。

myChart.resize({
  width: 800,
  height: 400
});

提示：閱讀文件時，請注意 API 的定義方式。resize() API 有時會被誤認為是像 myCharts.resize(800, 400) 這樣的形式，而這種形式不存在。

容器節點的處置和重建

我們假設存在幾個書籤頁面，每個頁面都包含一些圖表。在這種情況下，當選擇一個頁面時，其他頁面中的內容將從 DOM 中移除。重新選擇這些頁面後，使用者將無法找到圖表。

本質上，這是因為圖表的容器節點被移除。即使稍後再次新增節點，圖表所在的節點也不再存在。

正確的方法是，在處置容器後呼叫 echartsInstance.dispose 以處置實例，並在再次新增容器後呼叫 echarts.init 進行初始化。

提示：在處置節點時呼叫 echartsInstance.dispose 以釋放資源，避免記憶體洩漏。

貢獻者在 GitHub 上編輯此頁面

pissang

plainheart

ppd0705