Echarts根据DOM节点的宽高自适应图例大小，Echarts图例自适应的方法

最新推荐文章于 2024-04-16 09:31:13 发布

Beast_H

最新推荐文章于 2024-04-16 09:31:13 发布

阅读量1.7k

点赞数 3

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/H_114/article/details/122962176

版权

在做项目时遇到了调整窗口大小但是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 接口可以监听到