寿光网站建设报价,北京建设企业网站,展示型网站功能,云南网站建设费用文章目录 一、需求背景#xff1a;二、需求分析#xff1a;三、选择方案#xff1a;四、实现代码#xff1a;五、效果预览#xff1a;六、封装组件#xff1a; 一、需求背景#xff1a;
数据可视化大屏是一种将数据、信息和可视化效果集中展示在一块或多块大屏幕上的技… 文章目录 一、需求背景二、需求分析三、选择方案四、实现代码五、效果预览六、封装组件 一、需求背景
数据可视化大屏是一种将数据、信息和可视化效果集中展示在一块或多块大屏幕上的技术。通过各种图形、图表、数据可视化等方式将复杂的数据和信息变得直观、易懂让人们能够快速地了解数据和信息的含义。
应对现在数据可视化的趋势越来越多企业需要在很多场景(营销数据生产数据用户数据)下使用可视化图表来展示体现数据让数据更加直观数据特点更加突出。
根据不同的业务场景做一个好的大屏需要考虑大屏布局、图表展现、交互动效、操作是否简单、是否能自适应等等因素。其中大屏是否能自适应也是一个比较重要的因素。
在做可视化大屏时大屏的分辨率基本都是固定死的因此我们只需要把页面按照设计稿尺寸写死即可但是我们开发屏幕很小这时候总要将浏览器进行缩小这里给出一个通用方法供大家使用无需缩放浏览器。
二、需求分析
本示例按照1920*1080的分辨率来写也就是16:9的比例。你也可以替换成你自己的分辨率。效果是一样的。
做大屏项目时需要适配不同屏幕且在任意屏幕下保持16:9的比例保持显示效果一致屏幕比例不一致两边留白即可。
不同屏幕宽高比例(和设计稿16:9)相比会有两种情况 更宽(Width / Height) 16/9以高度为基准去适配宽度。 更高(Width / Height) 16/9以宽度为基准去适配高度。
三、选择方案
首先我们严格按照给定的UI设计稿的宽高尺寸画页面。然后我们再去计算一下放大或者缩小的倍数。
这时候要注意了因为每块屏幕不一样所以这个缩放的数值不是个固定的值所以是个变量。这时候我们就要进入页面的时候计算出来这个缩放值。
利用transform的scale属性缩放缩放整个页面。
我们还使用transform-origin属性将缩放的中心点设置为左上角以确保大屏幕按比例缩放。
四、实现代码
1、新建autoResizeScreenMixin.js
export default {data() {return {width: 1920,height: 1080,}},mounted() {this.autoResizeScreen();window.addEventListener(resize, this.autoResizeScreen);},methods: {autoResizeScreen() {let rect this.$refs.AutoScalContainerRef.getBoundingClientRect()let DomRef this.$refs.DomReflet clientWidth rect.widthlet clientHeight rect.heightvar width this.widthvar height this.heightlet left 0let top 0let scale 0let ratio width / height;if ((clientWidth / clientHeight) ratio) {scale clientHeight / height;top 0;left (clientWidth - width * scale) / 2;} else {scale clientWidth / width;left 0;top (clientHeight - height * scale) / 2;}Object.assign(DomRef.style, {transform: scale(${scale}),left: ${left}px,top: ${top}px,});}},beforeDestroy() {window.removeEventListener(resize, this.autoResizeScreen);},
}2、在app.vue的页面下使用
templatediv idappdiv classauto-scal-container refAutoScalContainerRefdiv refDomRef classauto-scal-container-innerrouter-view //div/div/div
/templatescript
import autoResizeScreenMixin from /utils/autoResizeScreenMixin ;
export default {mixins: [autoResizeScreenMixin]
}
/script3、在HomeView.vue页面写大屏代码布局
templatediv classcustom-big-boxdiv classtop头部/divdiv classbotdiv classleft左侧/divdiv classmiddiv classmidtop卡片/divdiv classmidbot地图/div/divdiv classright右侧/div/div/div
/templatescript
export default {}
/scriptstyle
.custom-big-box {width: 1920px;height: 1080px;font-size: 26px;color: #fff;text-align: center;line-height: 100px;
}.top {width: 100%;height: 100px;background-color: #409EFF;
}.bot {padding: 20px;padding-top: 0;display: flex;height: 980px;background-color: #DCDFE6;
}.left {width: 400px;height: 960px;background-color: #67C23A;
}.mid {width: 1080px;height: 960px;
}.right {width: 400px;height: 960px;background-color: #E6A23C;
}.midtop {height: 100px;width: 100%;background-color: #F56C6C;
}.midbot {width: 100%;height: 860px;background-color: #909399;
}
/style五、效果预览 效果预览合适的分辨率 效果预览更宽 效果预览更高 六、封装组件
当然你也可以封装个组件来使用。
我这边上传了一个我封装好的组件示例。在顶部可以下载。
可以在一个项目里面使用不同分辨率或比例的大屏页面。
这里我做了3中比例的示例演示16:9的4:3的不规则的
通过传参widthheight即可适应缩放。
代码里面创建了AutoScalContainer组件建了3个示例页面演示不同分辨率或比例的大屏页面的效果。
AboutView.vue是1920*1080的分辨率大屏页面(16:9)HomeView.vue是8400*3150的分辨率大屏页面(不规则)HelloWorld.vue是1024*768的分辨率大屏页面(4:3)
