在做项目时遇到了调整窗口大小但是Echarts绘制的图例大小没有响应式改变,解决方案有两种,网上大部分的解决方案是利用window监听resize事件然后调用Echarts自身的Api,代码如下:
/* Echarts自适应封装 */
export function resizeMyCharts(myCharts: any) {
window.addEventListener("resize", () => {
myCharts.resize();
})
}
/*Echarts.vue*/
import { resizeMyCharts } from "./utils.ts"
/*然后我们只需要在初始化Echarts实例后调用它即可*/
let chartDom: any = document.getElementById(domName);
let myChart = echarts.init(chartDom);
resizeMyCharts(myChart)
...
上面这种方法是网上大部分的思路,结合我自己封装了一下,但是面对不调整页面窗口而是在页面显隐菜单时(DOM重绘的时候)Echarts仍然不是响应式的,就好比折叠菜单栏,折叠之前ECharts大小合适折叠之后以上的方法就失去效果了。
这个时候我们要用到另一种思路,利用JS的观察者模式(Observer)来完成,不知道的小伙伴自行去了解一下,其中有个API是ResizeObserver,在MDN上是这样介绍这个API的
ResizeObserver
接口可以监听到