图表容器及大小

在快速上手中， 我们介绍了初始化ECharts的接口echarts.init。

API文档中详细介绍了参数的具体含义， 建议理解后再阅读本文。

下面， 我们就常见的几种使用场景， 介绍如何初始化一个图表以及改变其大小。

通常来说， 需要在HTML中 先定义一个节点， 并且通过CSS 使得该节点具有宽度和高度。

初始化的时候， 传入该节点， 图表的大小默认即为该节点的大小， 除非声明了opts.width或opts.height将其覆盖。

需要注意的是， 使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。

如果图表容器不存在宽度和高度， 或者， 你希望图表宽度和高度不等于容器大小， 也可以在初始化的时候指定大小。

在有些场景下， 我们希望当容器大小改变时， 图表的大小也相应地改变。

比如， 图表容器是一个 高度为300px、宽度为页面100%的节点， 你希望在浏览器宽度改变的时候， 始终保持图表宽度是页面的100%。

这种情况下， 可以监听页面的window.onresize事件 获取浏览器大小改变的事件， 然后调用echartsInstance.resize改变图表的大小。

除了直接调用resize()不含参数的形式之外， 还可以指定宽度和高度， 实现图表大小不等于容器大小的效果。

小贴士： 阅读API文档的时候 要留意接口的定义方式， 这一接口有时会被误认为是myCharts.resize(800, 400) 的形式， 但其实不存在这样的调用方式。

假设页面中存在多个标签页， 每个标签页都包含一些图表。

当选中一个标签页的时候， 其他标签页的内容在DOM中被移除了。

这样， 当用户再选中这些标签页的时候， 就会发现图表“不见”了。

本质上， 这是由于图表的容器节点被移除导致的。

即使之后该节点被重新添加， 图表所在的节点也已经不存在了。

正确的做法是， 在图表容器被销毁之后， 调用echartsInstance.dispose销毁实例， 在图表容器重新被添加后再次调用echarts.init初始化。

小贴士： 在容器节点被销毁时， 总是应调用echartsInstance.dispose以销毁实例释放资源， 避免内存泄漏。