解决echarts一个页面展示多个图形时无法自适应

本文介绍了在网页中使用ECharts展示多个图表时如何确保所有图表都能自适应窗口大小的方法。通过为每个图表实例绑定窗口调整大小事件,可以实现平滑的缩放效果。

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

开发时,经常碰到一个页面显示一个echarts图或多个echarts图的情形,通常,当页面只有一个echarts图形时,可以通过以下代码实现自适应:

myChart.setOption(option);
// 设置自适应屏幕大小
window.onresize = myChart.resize;

但是,当一个页面有多个图时,上述代码可能只会使一个图形自适应,而其他图形不会自适应,这时,在每个echarts图形的代码中都用下面的代码就可以轻松解决:

myChart.setOption(option);
// 设置自适应屏幕大小
//window.onresize = myChart.resize;
window.addEventListener("resize",function(){
	myChart.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); } ``` 以上方式确保了即使页面布局复杂或者存在多个表的情况下也能正常工作。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值