图表容器和尺寸

在开始中，我们介绍了初始化 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