图表容器与尺寸

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