[解决方法]echarts地图/图表缩放，侧边栏导致样式自适应问题

🔎嘿，这里是慰慰👩🏻‍🎓，会发各种类型的文章，智能专业，从事前端🐾
🎉如果有帮助的话，就点个赞叭，让我开心一下！🙋🏻‍♀️ ✨也可以关注评论收藏私信⭐️
要是没有回呢，那我大概就在上班，学习，摸鱼…

在使用 ECharts 进行数据可视化时，确保图表可以自适应窗口大小变化和侧边栏的收缩是非常重要的，这样可以提供更好的用户体验。以下是一些常用的方法来实现图表的自适应：

1. 窗口大小变化时的自适应：
   当浏览器窗口大小发生变化时，可以使用 window.addEventListener 来监听 resize 事件，并调用 ECharts 实例的 resize 方法来更新图表大小。例如：

   window.addEventListener("resize", () => {
     myEchart.resize();
   });
   

   这行代码会确保每当用户调整浏览器窗口大小时，ECharts 实例 myEchart 都会自动调整其大小以适应新的窗口尺寸。

2. 侧边栏收缩时的自适应：
   如果图表的大小还需要根据侧边栏的收缩进行自适应，你需要监听侧边栏的收缩事件，并同样调用 resize 方法。这通常涉及到你的应用程序中特定的 DOM 元素或布局库的事件。例如，如果你使用的是一个框架或库来管理侧边栏，那么你可能需要监听框架或库提供的事件。

   // 假设 'sidebar' 是你的侧边栏元素
   document.getElementById('sidebar').addEventListener('collapse', () => {
     myChart1.resize();
   });
   
   document.getElementById('sidebar').addEventListener('expand', () => {
     myChart1.resize();
   });
   

   上述代码段中，我们假设有一个 sidebar 元素，并且它提供了 collapse 和 expand 事件。当这些事件发生时，ECharts 实例 myChart1 会相应地调整其大小。

3. 内容显示不全的问题：
   如果侧边栏展开时内容显示不全，这可能是因为布局问题或者 CSS 样式设置不当。确保你的布局和样式可以处理不同宽度下的显示情况。可能需要使用媒体查询（Media Queries）来为不同屏幕尺寸设置不同的样式，或者使用百分比宽度来确保元素可以灵活伸缩。

4. 使用 ECharts 的 roam 属性：
   对于地图类型的图表，ECharts 提供了 roam 属性，可以控制是否允许用户进行缩放和平移操作。如果已经启用了 roam 属性，确保在进行自适应调整时也考虑了用户的交互操作。

5. 性能考虑：
   频繁调用 resize 方法可能会影响性能，尤其是在窗口不断调整大小时。在某些情况下，可以考虑使用节流（throttle）或防抖（debounce）技术来限制 resize 事件的处理频率。

通过上述方法，你可以确保 ECharts 图表在不同情况下都能保持良好的显示效果和用户体验。