前言：在很多时候例如数据大屏、首页等情况下需要使用Echerts，但是在使用过程中经常遇到浏览器缩放或不同分辨率、用户改变浏览器大小的情况下，这是时候我们的图表不会根据浏览器缩放，#所以我分享给大家我的解决步骤。
1.在vue项目中按照Echarts
使用npm或者cnpm 安装
npm install echarts --save
cnpm install echarts --save
2.引入使用Echarts
import * as echarts from "echarts";
3.用到的API介绍及初始化绘制实现步骤
1.首先这里用到一个 ResizeObserver API 介绍一下
ResizeObserver 是一个 JavaScript API，用于监视元素的大小变化。它可以观察一个或多个 DOM 元素，以便在元素的大小或形状发生变化时触发回调函数。ResizeObserver 是为了更有效地处理元素尺寸变化而引入的，特别适用于响应式设计和自适应布局。
简化尺寸观察：ResizeObserver 提供了一种简单而强大的方法来监视元素的大小变化，而无需使用传统的事件监听器和轮询。
观察多个元素：你可以同时观察多个 DOM 元素，当这些元素的尺寸发生变化时，ResizeObserver 会在每个元素上触发回调函数。
异步回调：ResizeObserver 的回调是异步执行的，这意味着它会在浏览器准备好更新时触发，而不会引发性能问题。
支持容器查询：容器查询是一种在元素的尺寸变化时，根据容器的尺寸来调整元素的布局。ResizeObserver 可以用于实现容器查询的功能。
适应响应式设计：ResizeObserver 对于响应式设计非常有用，可以根据元素的尺寸变化来调整布局，以适应不同的屏幕尺寸和设备。
适用于自定义组件：你可以将 ResizeObserver 集成到自定义组件中，以便在组件内监视子元素的大小变化。
兼容性：
`
2.绘制echarts并监听是否改变大小
//首先创建一个div用于显示
<div class="box">
<div ref="myecharts" style="width: 60%; height: 250px"></div>
</div>
//定义ref，vue2在data中定义myecharts
const myecharts = ref();
//绘制echarts并监听是否重新绘制
//ResizeObserver是个构造函数。在使用new关键字调用构造函数，返回实例对象时，需要传入一个回调函数，这个回//调用于监听实例对象某个DOM节点的变化
async function init() {
let test = echarts.init(myecharts.value);
//这行代码通过 `new` 操作符调用 `ResizeObserver` 构造函数，并传入一个回调函数。这个回调函数会在监听的 `<div>` 元素大小发生变化时被调用。
const resizeObserver = new ResizeObserver((entries) => {
//在回调函数内部，通过一个 `for...of` 循环遍历所有被观察到的变化。这里 `entries` 是一个数组，包含了每个被观察 `<div>` 元素的变化信息。
for (let entry of entries) {
const width = entry.contentRect.width;
//这行代码获取变化后的宽度值，并将其设置为 `<div>` 元素的 `style` 属性，从而实现宽度的实时更新。
myecharts.value.style.width = width + "px";
//在更新 `<div>` 元素的宽度后，调用 `Echarts` 实例的 `resize` 方法，通知 `Echarts` 图表需要根 据新的容器尺寸进行重绘，以确保图表能够自适应容器的大小变化。
test.resize()；
}
//这行代码获取 `<div>` 元素的引用，以便将其传递给 `ResizeObserver` 进行观察。
const myDiv = document.querySelector(".box")
//这行代码开始观察 `<div>` 元素，并在其大小发生变化时调用之前提供的回调函数。
resizeObserver.observe(myDiv);
}
