简介

业界解决方案

百度的 sugar 可视化解决方案

https://sugar.baidu.com/home

阿里datav

https://data.aliyun.com/visual/datav

腾讯云图

https://cloud.tencent.com/product/yuntu

尺寸

现在一般的大屏设计基本都是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;
}

github

https://github.com/bosscheng/big-dashboard

https://bosscheng.github.io/big-dashboard/

基于vue的可视化大屏开发相关推荐

润乾报表列太多导致渲染速度慢_报表自动化: 如何选择可视化大屏开发利器
报表自动化: 如何选择可视化大屏开发利器www.coologic.cn 我们在前文完成了各种数据的准备:原始数据.指标数据.报表表格等等,但仍然无法解决"阅者"难以理解庞大数据. ...
基于WebGL的三维数据可视化大屏开发流 ThingJS
三维数据大屏可视化系统包含多源数据连接.生成二维/三维视图.构建可视化大屏.大屏功能应用等一体化服务,基于多年可视化项目经验,ThingJS平台得出从数据源上传到可视化大屏应用的完整流程,供参考. 多 ...
使用VUE实现可视化大屏的适配思路总结（文末送vue版可视化大屏源码）
页面布局在拿到设计图后,通常会先通过设计图的布局来思考代码的设计,这也是开始着手写代码前必须要进行的一步,在项目中,我曾遇到,在一张大屏图开发到一半的时候介入,和另一个前端一起进行开发,结果由于她将 ...
前端 vue 在可视化大屏领域的工作实践
导读:最近入职了一家互联网公司,主要是做物联网及互联网解决方案方向,我上来就接手了这个项目,是一个可视化管理地图,主要用于某国企物业的安全预警的职能,说来也比较倒霉,刚来这公司,公司做这个项目的前端和 ...
基于echarts 数据可视化大屏展示全国热点分布高亮地图特效
前言
基于echarts 数据可视化大屏展示HTML大数据综合分析平台模板
前言
基于echarts 数据可视化大屏展示数据概览演示案例
前言
vue实现酷炫可视化大屏
vue实现可视化大屏技术要点效果图项目搭建代码编写技术要点 vue2 less echarts v-charts flexible 主要采用v-charts+echarts进行实现图表可视化 ...
学会这个神器和技巧，低代码开发高端可视化大屏
随着企业数字化建设的发展,领导对数据价值的利用意识越来越高,数据分析和展现需求日益增长.对于管理层来说,可视化大屏和驾驶舱项目尤其受欢迎,这两年我遇到的BI项目有半数会有开发管理驾驶舱.大屏的需求. ...

基于vue的可视化大屏开发

简介