echarts生成的图表大小怎么随屏幕的大小改变自适应

最近在做图表，记录一下用到的知识点，当做自己的日记吧，会不断添加新内容

 

1，echarts生成的图表大小怎么随屏幕的大小改变自适应？

this.chart.setOption(this.options)
window.onresize = chart.resize

 

官方api

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 中显示指定图表高宽。

原文章地址：http://echarts.baidu.com/api.html#echartsInstance.resize