前言

框架：若依 VUE+SpringBoot前后端分离

基于此框架开发一个可视化自适应大屏（包括echarts和element的各种组件）

1.布局

通过div将大的布局框出来，div一定要由大到小的写，否则太容易画错了，为了便于更直观的看到自己的div大小，可以在style中加上border: 1px dashed #aaa;把div的边框显示出来。

我的页面布局分为上下2个部分，下面的部分又分为左中右3个模块，左中右模块的每个模块又会分成上中下三个小模块，各个模块中会放一些echarts的图例（柱状图，饼图，折线图）和element的table表格，当然这还没有结束,小的模块下面还会有更小的div。

自适应布局：要想做到自适应，div的宽和高一定得用百分比。（还有文字，echarts和element的组件也要做相应的处理，这个之后再写）

大致的布局图如下：

源码如下：

<template><div class="wrap"><!--    头部div--><div class="header">{{ nowTime }}</div><!--    下部容器div--><div class="container"><!--左边模块--><div class="leftpart"><!--左边上模块--><div class="leftrighttopback"></div><!--左边模块分割--><div style="width:100%;height:2%;"></div><!--左边下模块--><div class="leftrightbottomback"></div></div><!--中间模块--><div class="centerpart"></div><!--右边模块--><div class="rtghtpart"><!--右边第一个模块--><div class="leftrighttopback"></div><!--右边模块分割--><div style="width:100%;height:2%;"></div><!--右边第二个模块--><div class="leftrightbottomback"></div></div></div></div></template>
<script>export default {data() {return {nowTime: ''};},mounted() {this.getNowTime();},methods: {getNowTime () {let speed = 1000let that = thislet theNowTime = function () {that.nowTime = that.timeNumber()}setInterval(theNowTime, speed)},timeNumber () {let today = new Date()let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())return date + '  ' + time},twoDigits (val) {if (val < 10) return '0' + valreturn val},},
}
</script><style scoped>
.wrap {background: url("../../../assets/img/visualMonitoringlogo/wh_singleback.png");background-size: cover;width: 100%;height: 50vw;border: 2px dashed #aaa;
}
.header {font-size: 1vw;height: 8%;color: #ffffff;text-align: right;line-height:4vw;border: 2px dashed #aaa;
}
.container {margin: 0 0.5vw 0.5vw;display: flex;justify-content: space-between;height: 92%;border: 2px dashed #aaa;
}
.leftpart{float:left;width:28%;height:98%;border: 2px dashed #aaa;
}
.centerpart{float:left;width:44%;height:98%;border: 2px dashed #aaa;
}
.rtghtpart{float:left;width:28%;height:98%;border: 2px dashed #aaa;
}
.leftrighttopback {width:100%;height:42%;background-color: rgba(46, 66, 96, 0.4);border: 2px dashed #aaa;
}
.leftrightbottomback {width:100%;height:56%;background-color: rgba(46, 66, 96, 0.4);border: 2px dashed #aaa;
}</style>

2.echarts图例+element组件的应用

未完待续。。。

VUE大屏可视化实战相关推荐

Vue大屏可视化DataV组件库
前言最近需要做一个 Vue大屏数据可视化的项目,找资料的时候发现一个很棒的 vue大屏数据可视化插件DataV组件库,可使我们大屏看起来更高端. DataV介绍网站链接:http://datav. ...
用Vue大屏可视化，数据可视化平台酷屏优胜它
大屏可视化,老司机提到vue大家肯定不陌生,什么是Vue呢?Vue 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心 ...
vue大屏可视化自适应完美方案
背景在做大屏可视化项目的时候,一般设计稿会设计成1920*1080,但是页面写死1920*1080在2k.4k等分辨率的屏幕下是不适配的.如果页面能够根据屏幕比例进行等比缩放那就好了. 比例什么? ...
vue大屏可视化布局
html {/* 将屏幕整个宽度设置为24rem,从而自动实现内容按照屏幕的大小进行缩放 *//* 屏幕大小比例 16:9 */font-size: calc(100vw / 24); } body ...
Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
这几天在做大屏项目的屏幕适配. 看到别人提到过使用flexible.js可以完成大屏的适配.我也尝试了一下,但是并没有成功. 参考了一下别人的项目的适配. 简单描述一下这个适配大屏代码的思路,主要通过 ...
可视化大屏设计尺寸_Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)
最近在用VUE写大屏页面,遇到屏幕自适应问题,根据设计的尺寸,在各种屏幕尺寸下自适应,保持显示比例不变,经过几天摸索,终于达到了效果,希望为还在这问题困扰的提供点帮助铺满全屏效果见Vue 大屏可视化 ...
vue移动端用什么数据可视化插件_vue框架大屏可视化
现在越来越多公司引入可视化大屏,不仅炫酷,而且能更直观的看到各个维度的数据!现在收费的大屏可视化服务很多,比如阿里云datav.百度Sugar.腾讯云图等.vue框架大屏可视化,因为开源免费功能又好, ...
基于Vue的数据可视化设计框架，数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器简介 ...
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...

VUE大屏可视化实战

前言

1.布局

2.echarts图例+element组件的应用

VUE大屏可视化实战相关推荐

最新文章

热门文章