您现在的位置是:网站首页> 编程资料编程资料
vue中设置echarts宽度自适应的代码步骤_vue.js_
2023-05-24
266人已围观
简介 vue中设置echarts宽度自适应的代码步骤_vue.js_
问题描述
我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果
无自适应效果图
我们发现echarts图的宽度并没有随着页面宽度的变化而变化
有自适应效果图
很显然,这个才是我们想要的效果
代码步骤
echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行echarts的resize方法即可重绘canvas,从而实现对应自适应效果。请看代码中的注释步骤
到此这篇关于vue中设置echarts宽度自适应的问题及解决方案的文章就介绍到这了,更多相关vue 宽度自适应内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- Vue中使用Echarts可视化图表宽度自适应的完美解决方案_vue.js_
- vue中的echarts实现宽度自适应的解决方案_vue.js_
- Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码_vue.js_
- TypeScript数组的定义与使用详解_javascript技巧_
- vue项目打包后部署到服务器的详细步骤_vue.js_
- vue3动态修改打包后的请求路径的操作代码_vue.js_
- 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题_vue.js_
- hooks中useEffect()使用案例详解_React_
- JavaScript中async与await实现原理与细节_javascript技巧_
- 使用vue插件axios传数据的Content-Type及格式问题详解_vue.js_