Echarts 自适应？小样，跟我玩儿呢！
Echarts 自适应，这可是老司机必备的技能！你以为只是简单地让图表跟着页面大小变来变去吗？图样图森破！这可是门大学问！
你要明白，Echarts 自适应可不是简单的 "一刀切"，要根据不同的情况使用不同的方法，才能达到最佳效果。
一、页面大小变化，图表也要跟着变？
这可是最常见的需求了！想想看，你辛辛苦苦做出来的图表，结果用户一缩小浏览器窗口，图表就挤成一团，那画面太美，我不敢看！
别慌，Echarts 自适应帮你解决！
最简单的方法就是使用 window.onresize 事件，在页面大小发生变化时，重新渲染图表：
javascript
window.onresize = function () {
myChart.resize();
注意！ 如果你页面有多个图表，就需要使用 addEventListener 来监听事件了：
javascript
window.addEventListener('resize', function () {
myChart.resize();
二、图表大小固定，但内容要根据页面大小调整？
这种情况就比较考验你的设计功底了！你不能让图表被挤扁，也不能让内容被压缩得太厉害。
这里就需要用到 Echarts 的一些配置项了，比如：
width 和 height：设置图表容器的宽度和高度。
series.data：设置图表的数据。
grid.left、grid.right、grid.top、grid.bottom：设置图表区域的位置。
legend.orient：设置图例的排列方式。
通过调整这些配置项，你可以根据页面大小动态调整图表的内容，让图表始终保持最佳的视觉效果。
三、图表要根据不同的屏幕尺寸进行自适应？
这就要用到媒体查询（@media）了！你可以在 CSS 中根据不同的屏幕尺寸设置不同的样式，让 Echarts 在不同的设备上都能完美展示。
比如：
css
@media (max-width: 768px) {
.my-chart {
width: 100%;
height: 300px;
@media (min-width: 768px) {
.my-chart {
width: 500px;
height: 400px;
这样一来，当屏幕宽度小于 768px 时，图表会占满整个屏幕宽度，高度固定为 300px；当屏幕宽度大于等于 768px 时，图表宽度固定为 500px，高度固定为 400px。
四、图表自适应的终极奥义！
掌握了以上技巧，你已经可以应对绝大多数自适应场景了。但如果你追求极致，还可以尝试一些更高级的技巧，比如：
使用 echarts-for-react 或 echarts-for-vue 等组件库，它们提供了更方便的 API 来处理自适应
使用 resizeObserver 来监听图表容器的大小变化，并在大小变化时重新渲染图表。
使用响应式布局，让图表在不同屏幕尺寸下都能保持最佳的视觉效果。
Echarts 自适应，并非一蹴而就，需要不断学习和探索！
来吧，快来和我一起学习 Echarts 自适应的奥秘，让你的图表在任何设备上都能完美展示！
表格示例：
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| window.onresize | 图表跟随页面大小变化 | 简单易用 | 效率较低，尤其是页面有多个图表时 |
| addEventListener | 页面有多个图表 | 效率更高 | 稍微复杂一些 |
| 配置项 | 图表大小固定，内容需要调整 | 灵活度高 | 需要手动调整配置项 |
| 媒体查询 | 根据不同屏幕尺寸进行自适应 | 适应性强 | 需要编写 CSS 代码 |
你是否也遇到过 Echarts 自适应的难题？快来分享你的经验吧！