圖表容器與尺寸

在快速上手中，我們介紹了初始化 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