图表容器及大小

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