Echarts 页面多图自适应的解决办法

本文详细介绍了如何在Echarts应用中实现多个图表的自适应效果,通过使用window.addEventListener('resize')方法叠加不同图表的resize事件,确保页面上所有图表都能根据浏览器窗口变化而动态调整大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

         网上看到有不少人使用Echarts抽象出来的框架,实现自适应的效果代码:window.onresize  = option.chart.resize(), 这个代码基本是官网上的window.onresize = myCharts.resize();的翻版。

但在实际的应用中一个页面可能会有好几个Echarts图表,而使用window.onresize = option.chart.resize(),加载页面图表后,页面上只有一个图表会根据浏览器的变化而自适应。如果要是页面上的图表都要自适应。则需要将resize事件叠加在不同的图上面,使用一下代码可以实现。


 window.addEventListener("resize", function () {
                      option.chart.resize();
                  });


### ECharts 自适应浏览器窗口大小 为了使 ECharts 生成的表能够根据浏览器窗口大小自动调整,可以通过监听 `window` 的 `resize` 事件并调用表实例的 `resize()` 方法来实现[^1]。 以下是完整的解决方案: #### 实现代码示例 ```javascript // 引入 ECharts 库 import * as echarts from 'echarts'; // 初始化 ECharts 实例 const myChart = echarts.init(document.getElementById('main')); // 假设 DOM 容器 ID 为 main // 配置项和数据 const option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); // 监听窗口尺寸变化事件 window.addEventListener("resize", () => { myChart.resize(); // 调整大小以适配新的窗口尺寸 }); ``` 上述代码通过绑定 `resize` 事件,在浏览器窗口发生变化触发回调函数,并在其中调用了 `myChart.resize()` 来动态更新表的显示区域。 另外需要注意的是,如果使用 Vue.js 或其他框架开发,则可以结合生命周期钩子完成初始化与销毁操作。例如在组件卸载前移除事件监听器以防内存泄漏[^2]。 ```javascript beforeDestroy() { window.removeEventListener("resize", this.handleResize); } ``` 以上方式确保了即使页面布局复杂或者存在多个表的情况下也能正常工作。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值