echarts 监测容器大小 根据容器大小适配echarts 柱状图大小

   let resizeObserver = new ResizeObserver(entries => {

        for (let entry of entries) {

          this.myCharts.resize();

        }

      });

      let div = document.getElementById ('echarts');

      resizeObserver.observe(div);

要实现echarts柱状图的屏幕大小适配,可以按照以下步骤进行操作。 首先,在代码中添加一个监听窗口大小改变的事件,使用`window.addEventListener('resize', () => { myChart.resize() })`来监听窗口大小的改变。这样当窗口大小改变时,图表会自动进行适配。 其次,获取图表容器的宽度,并根据宽度的比例来调整元素的大小。可以通过`document.getElementById('columnar').offsetWidth`来获取图表容器的宽度,然后根据需要的比例进行调整。 最后,在第一次加载图表、刷新页面和窗口大小改变时,都需要进行上述的适配操作。这样就可以实现echarts柱状图的屏幕大小适配了。 需要注意的是,在组件卸载时,需要将监听事件进行卸载,以避免内存泄漏的问题。 以上就是实现echarts柱状图屏幕大小适配的方法。希望对你有帮助!\[1\] \[2\] #### 引用[.reference_title] - *1* [vue中Echarts柱状图大小随浏览器窗口自适应、轴线刻度标签显示或隐藏](https://blog.csdn.net/weixin_45440916/article/details/120788023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts 柱状图案例(屏幕自适应、元素自适应、动态显示、配置逻辑)](https://blog.csdn.net/weixin_43294560/article/details/109177022)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

闫焕俊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值