简介
业界解决方案
百度的 sugar 可视化解决方案
阿里datav
腾讯云图
cloud.tencent.com/product/yun…
尺寸
现在一般的大屏设计基本都是16:9 或者是 32:9的尺寸
设计稿
设计稿给出来的图也基本是16:9的图,1920*1080
自适应尺寸
按照设计稿来说1920*1080切图展示是没有问题的,但是一个还是需要兜底方案的,就是需要兼容其他尺寸的页面,所以需要一个自适应的方案
scale + margin 方案
就是dashboard 大屏的页面 设置 style="width: 1920px;height: 1080px;"
属性,然后通过 scale
缩放 来自适应。 外层通过 margin: 0 xxpx
实现居中展示。
<div class="wrapper">
<div class="container">
<div class="dashboard-bg-image"></div>
<div :style="marginStyle">
<div style="position: relative;">
<div class="dashboard-container" style="width: 1920px;height: 1080px;" :style="transformStyle">
<top-title :title.sync="title"></top-title>
<!-- left -->
<dashboard1></dashboard1>
<!-- right -->
<dashboard2></dashboard2>
<!-- right -->
<dashboard3></dashboard3>
<!-- right -->
<dashboard4></dashboard4>
</div>
</div>
</div>
</div>
</div>
复制代码
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.container {
background-color: rgb(3, 12, 59);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dashboard-bg-image {
width: 100%;
height: 100%;
position: absolute;
background: url('../assets/bg2.jpg');
}
.dashboard-container {
position: relative;
user-select: none;
width: 100%;
height: 100%;
transform-origin: 0 0;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
transition: all .3s linear;
overflow: hidden;
}
复制代码
相关推荐
Vue.js 是一款流行的前端...总的来说,"vue大屏模板素材收集 .zip"提供的资源涵盖了Vue.js开发和ECharts数据可视化的多个方面,无论是初学者还是有经验的开发者,都能从中受益,快速构建出专业且美观的大屏幕展示应用。
内容概要:组件库基于Vue ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用,主要包含三个大屏demo案例。 适合人群:具备一定编程基础,组件库的开发和调试都使用Chrome浏览器 能学到...
本项目是一款基于Vue的大屏可视化设计源码,涵盖693个文件,其中包括174个JavaScript文件、148个Vue组件文件、110个Java后端代码文件,以及丰富的图片、JSON、SVG等多种资源。它实现了前后端一体化,支持多种炫酷...
基于Vue的数据大屏设计源码,该项目包含73个文件,主要文件类型有32个png图像文件,以及15个vue前端文件。此外,还包括10个javascript文件,6个ttf字体文件,以及3个json配置文件。该项目是一个基于Vue的数据大屏...
vue大屏可视化demo 使用方法: # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
在“Vue大屏可视化案例资源”中,我们可以深入学习如何利用Vue.js进行大屏数据可视化的开发,这对于那些希望提升Vue技能并对此领域感兴趣的人来说是一份宝贵的资料。 在大屏可视化领域,主要目标是将复杂的数据以...
【大屏可视化搭建系统源码(vue)】是一款基于Vue.js框架开发的,用于构建大规模数据展示和交互的大屏设计工具。Vue.js是目前前端开发领域广泛应用的轻量级JavaScript库,以其组件化、易学易用的特点深受开发者喜爱...
本资源提供了一套基于Vue和TypeScript的物流数据大屏界面的设计源码,包含42个文件,其中包括16个PNG图片文件,12个Vue组件文件,以及4个TypeScript源...这些文件非常适合用于学习和参考Vue和TypeScript项目的开发。
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器,具备大屏设计、预览能力,支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy...
Vue大屏项目是一个专为展示宽屏或多屏内容设计的应用,尤其适合数据分析、监控系统或者信息展示等场景。在这个项目中,"三屏显示"意味着它支持在一个屏幕上同时展示三个独立的内容区域,可能是为了实现多角度的数据...
基于Vue3.0的“数据可视化大屏”设计与编辑器源码 使用方法: 1. 下载该项目到本地, 2. 安装依赖 // yarn run install npm run install 3. 运行预览 // yarn run build npm run build 本项目为个人项目, 主要使用 ...
Vue大屏展示系统,主要用到的框架vue+DataV+ECharts,
项目简介:本项目采用Vue3和ECharts技术栈,构建了一个数据大屏可视化展示的完整案例。项目包含共计73个文件,其中主要包含JSON配置文件(47个),JavaScript脚本(11个),Vue组件(8个),以及其他辅助配置和资源...
本源码提供了一个基于Vue的数据可视化大屏设计。项目包含27个文件,其中包括9个Vue文件、6个JavaScript文件、3个JSON文件、2个SVG文件、1个Gitignore文件、1个Markdown文档、1个HTML文件、1个TTF文件和1个JPG图片。...
Vue.js 是一款轻量级的前端JavaScript框架,以其易学易用、高性能和组件化的特点在Web开发领域受到广泛欢迎。在"Vue数据可视化大屏_油井物联网监控_vue_"项目中,Vue.js 被用来构建一个实时的油井物联网监控系统,...
Vue+Echarts监控大屏实例十二:智慧物流监控模板实例,包括源码,开发文档、素材等。 使用vue-echarts实现监控大屏搭建,开发,实现对于监控界面的相关开发资料,提供实例源码、开发过程视频及实现过程。 高德地图并...
可视化大屏 Vue3 版本,基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)开发。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局渲染组件封装,支持数据动态刷新...