Echarts屏幕放大缩小自适应

如果echarts不做大小自适应的话，屏幕放大缩小是不会让实例自适应的，在这里我本人根据浏览器自带的监听屏幕事件window.addEventListener(‘resize’,function(){})这个方法结合echarts官网中的chart.resize()方法。
其原理是浏览器监听屏幕大小变化，执行echarts中的chart.resize()方法。只要屏幕尺寸发生改变，echarts实例会紧跟着同比例放大缩小。
如下图：

标题原始屏幕尺寸

在这里插入图片描述

标题屏幕尺寸改变

在这里插入图片描述
代码如下：
在这里插入图片描述

window.addEventListener("resize", () => {
   	 L_Capacity4.resize();
})
# echarts # vue.js # html5 # javascript
Logo
深开鸿 技术专区

更多推荐

cover

深开鸿版循造IDE正式发布！原生适配，Agent就绪，为鸿蒙生态添一把火

avatar 深开鸿 技术专区

HarmonyOS开发实战：小分享-ImageEditPage图片编辑器——黑色主题与文字叠加

页面预览图片编辑器界面设计图前言欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net图片编辑器 让用户选择图片后添加文字、滤镜等效果。小分享

avatar 深开鸿 技术专区

HarmonyOS开发实战：小分享-TextEditPage文字编辑器——Header+TextArea+工具栏

页面预览文字编辑器页面布局图前言欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net文字编辑器 是小分享 App 的核心功能之一，用户在此输入

avatar 深开鸿 技术专区