图表容器和大小

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