echarts-概念篇-图表容器及大小


图表容器及大小

在快速上手中,
我们介绍了初始化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销毁实例释放资源,
避免内存泄漏。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM