简介
业界解决方案
百度的 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 ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用,主要包含三个大屏demo案例。 适合人群:具备一定编程基础,组件库的开发和调试都使用Chrome浏览器 能学到...
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 ...
DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器,具备大屏设计、预览能力,支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy...
基于Vue3.0的“数据可视化大屏”设计与编辑器源码 使用方法: 1. 下载该项目到本地, 2. 安装依赖 // yarn run install npm run install 3. 运行预览 // yarn run build npm run build 本项目为个人项目, 主要使用 ...
Vue+Echarts监控大屏实例十二:智慧物流监控模板实例,包括源码,开发文档、素材等。 使用vue-echarts实现监控大屏搭建,开发,实现对于监控界面的相关开发资料,提供实例源码、开发过程视频及实现过程。 高德地图并...
可视化大屏 Vue3 版本,基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)开发。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局渲染组件封装,支持数据动态刷新...
大屏可视化搭建系统源码(vue)
Vue+Echarts监控大屏实例四:智慧农业监控模板实例,包括源码,开发文档、素材等。 使用vue-echarts实现监控大屏搭建,开发,实现对于监控界面的相关开发资料,提供实例源码、开发过程视频及实现过程。 高德地图并...
本设计源码提供了一个基于Vue的数据大屏。项目包含103个文件,主要使用Vue、JavaScript、CSS和HTML编程语言。文件类型包括62个PNG图片文件、19个Vue...该大屏适合用于学习和实践Vue技术,以及开发数据大屏相关的应用。
HTML基于vue2.0,拖拽式网站设计器、大屏设计器,基于VUE,实现拖拽 + 配置方式生成数据大屏,为简化开发、提高效率而生。 特性 0 代码: 实现完全拖拽 + 配置式生成大屏,设计即生产。 快速开发&部署: 项目采用...
Vue+Echarts监控大屏实例九:智慧园区监控模板实例,包括源码,开发文档、素材等。 使用vue-echarts实现监控大屏搭建,开发,实现对于监控界面的相关开发资料,提供实例源码、开发过程视频及实现过程。 高德地图并...
Vue+Echarts监控大屏实例二:促销活动监控模板实例,包括源码,开发文档、素材等。 使用vue+echarts实现促销活动监控展示,包括综合监控、热销品类监控、成交量监控、库存监控、浏览量监控、售后问题监控、物流监控...
课程设计大作业JavaScript基于vue+Echarts开发的大数据可视化大屏系统源码。代码清晰完整,难度适中,新手也可实际操作,不求人!高分必备 课程设计大作业JavaScript基于vue+Echarts开发的大数据可视化大屏系统源码...
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
springboot+vue 在线报表设计和大屏设计系统源码.zip
一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。 项目需要全屏展示...
Vue+Echarts监控大屏实例五:呼叫中心监控模板实例,包括源码,开发文档、素材等。 使用vue-echarts实现监控大屏搭建,开发,实现对于监控界面的相关开发资料,提供实例源码、开发过程视频及实现过程。 高德地图并...
自适应一直就是都是前端开发的大难题,特别是现在越来越多的项目喜欢大屏展示,今天公司给我的项目便是一个可视化大屏的项目,而且宽高只告诉了大概是4000*2000,然后使用的Vue3进行开发,网上找了一下几乎都是Vue2...