问题:echart图表根据页面大小,自适应渲染
项目中遇到这样的需求,简单总结下,避免遗忘。
方法:首先是用到了一个比较强大的包:element-resize-detector (核心包)
引入:
let elementResizeDetectorMaker = require('element-resize-detector')
let erd = elementResizeDetectorMaker()
获取到图表容器的宽的值,然后进行监听:
在mounted中获取到图表的宽,当监听到宽变化时,通过监听data中的数据,当宽变化时就开始重新渲染。须注意的是图表容器的宽必须是和父级元素一致即:100%