帮做网站,四川省建行网站,短视频推广的好处,如何免费学校建网站ECharts数据大屏展示效果 前言1、效果预览1.2、视频效果 2、使用框架3、如何处理屏幕自适应效果4、ECharts模块、dataV大屏插件 编写与布局5、往期回顾总结#xff1a; 前言 数据大屏需整体效果好看#xff0c;界面缩放自适应大小#xff0c;全屏展示铺满整个屏幕并自适应dataV大屏插件 编写与布局5、往期回顾总结 前言 数据大屏需整体效果好看界面缩放自适应大小全屏展示铺满整个屏幕并自适应同时需要融入动画元素 1、效果预览 分享最近开发的Vue2大屏效果 1.2、视频效果 2、使用框架 老项目框架是Vue2 element-ui数据大屏采用dataV 3、如何处理屏幕自适应效果
1、屏幕自适应处理
handleResize() {this.viewRefVal this.$refs.viewRef;if (this.viewRefVal) {this.viewRefVal.style.transform scale(${this.getScale()}) translate(-50%, -50%);this.viewRefVal.style.width 1920px;this.viewRefVal.style.height 1080px; // 1080px}
},2、根据浏览器大小推断缩放比例
getScale(width 1920, height 1080) {let ww window.innerWidth / width;let wh window.innerHeight / height;return ww wh ? ww : wh;
},3、在mounted中使用加载 window.addEventListener(resize, this.handleResize);
// 添加监听事件
window.addEventListener(resize, this.handleResize);4、在beforeDestroy中移除绑定的handleResize事件监听
// 移除绑定的handleResize事件监听beforeDestroy() {window.removeEventListener(resize, this.handleResize);},4、ECharts模块、dataV大屏插件 编写与布局 通常使用imoprt方式引入组件 页面布局和loading展示效果 5、往期回顾 — 获取源码接着往下看— vue3 TS vite 搭建中后台管理系统完整项目 vue3 JS vant 搭建移动端H5项目完整项目 手把手教 Vue3.2ViteEcharts 5 绘制3D线条效果中国地图 更多详细内容查看-项目预览- 总结
前端路上 | 所知甚少唯善学。 各位小伙伴有什么疑问欢迎留言探讨。
— 关注我前端路上不迷路 —
