echartsInstance即通过 echarts.init 创建的实例。
echartsInstance. resize
Function
(opts?: {
width?: number|string,
height?: number|string,
silent?: boolean
}) => ECharts
改变图表尺寸,在容器大小发生改变时需要手动调用。
参数
-
opts
opts 可缺省。有下面几个可选项:
-
width
可显式指定实例宽度,单位为像素。如果传入值为
null
/undefined
/'auto'
,则表示自动取dom
(实例容器)的宽度。 -
height
可显式指定实例高度,单位为像素。如果传入值为
null
/undefined
/'auto'
,则表示自动取dom
(实例容器)的高度。 -
silent
是否禁止抛出事件。默认为
false
。
-
Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 resize
方法获取正确的高宽并且刷新画布,或者在 opts
中显示指定图表高宽。
实际使用时echartsInstance.setOption(option)后写这么两句
// onresize 事件会在窗口或框架被调整大小时发生
window.onresize = () => echartsInstance.resize()
window.addEventListener('resize',() => echartsInstance.resize())