图表容器及大小
在快速上手中,
我们介绍了初始化ECharts的接口echarts.init
。
API文档中详细介绍了参数的具体含义,
建议理解后再阅读本文。
下面,
我们就常见的几种使用场景,
介绍如何初始化一个图表以及改变其大小。
初始化
在HTML中定义有宽度
和高度
的父容器
(推荐)
通常来说,
需要在HTML中
先定义一个<div>
节点,
并且通过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
以销毁实例
释放资源,
避免内存泄漏。