vue大屏展示项目实例,vue数据可视化大屏开发

　　公司的大数据工作组需要通过大数据屏幕显示一些经过处理后的有价值的信息。本文主要介绍Vue大屏幕数据显示示例，通过示例代码非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。

　　高效实现需求，避免构件库臃肿和重复造轮。前段时间做了很多大屏展示项目。今天给大家分享一下大屏幕的练习过程。一开始我是用dataview做组件库，后来发现不需要太多打包的组件，而且在移动端，有风格错乱的问题。于是看到了他的实现，做了一个大屏自适应组件。话不多说，直接上效果图：

　　翻译

　　你需要适应各种尺寸的大显示器，在手机上，你可以放大缩小看效果。我这里加了这么一段代码，通过缩放身体的大小，等比例上下缩放，达到不变形，整体适应的效果。

　　脚本

　　//页面缩放很常见

　　函数resizePage() {

　　//获取窗口的高度

　　var clientW=window.innerWidth

　　var clientH=window.innerHeight

　　//初始窗口与主体的比率

　　var bi=clientW/1920

　　//设置车身的宽度和高度——可以根据实际情况进行调整

　　document . getelementsbytagname( body )[0]. style . width= 1920 px

　　document . getelementsbytagname( body )[0]. style . height= 1080 px

　　document . getelementsbytagname( body )[0]. style . transform= scale( bi ， bi )

　　document . getelementsbytagname( body )[0]. style . transform origin= left top 0

　　}

　　resizePage()

　　//resize page()；

　　window.onresize=function () {

　　setTimeout(()={

　　resize page()；

　　},200)

　　}

　　/脚本

代码实现：

　　封装一个自适应大组件，可以设置大屏幕背景图像和整体效果。其他的基本都是echart的组件库，因为没有特别定制的需求图标。所以没有做太多个性化。

　　模板

　　div id= dv-全屏-容器

　　模板

　　插槽/插槽

　　/模板

　　/div

　　/模板

　　脚本

　　导出默认值{

　　已安装(){

　　}

　　}

　　/脚本

　　style lang=less

　　# dv-全屏-容器{

　　位置：固定；

　　top:0px；

　　左：0px

　　溢出：隐藏；

　　变换-原点：左上；

　　z指数：999；

　　宽度：100%；

　　身高：1080pxee

　　}

　　/风格

　　模板

　　div class=已满

　　dv-全屏-容器引用=满

　　内容

　　/dv-全屏-容器

　　/div

　　/模板

　　脚本

　　从导入fullScreenContainer。/全屏

　　导出默认值{

　　组件：{

　　dv-全屏容器:全屏容器

　　},

　　已安装(){

　　},

　　已创建(){

　　},

　　方法：{

　　}

　　}

　　/脚本

　　style lang=less 。满{

　　# dv-全屏-容器{

　　背景：#000222网址(./assets/images/BG . png)；

　　背景尺寸：100% 100%；

　　溢出：自动；全大边框{。内容{

　　填充：0 38px 0 38px

　　宽度：calc(100%-76px)；

　　显示器：flex

　　}

　　}

　　}

　　}

　　/风格

总结：

　　以上是我自己实现大屏整体适配的效果和方法。刚开始想偷懒，但是可以直接用dataview，但是需要的时候可能很难实现，或者想装一套太臃肿的组件库，很难帮助我的强迫症。希望你能有更好的封装方法。我只是浅尝辄止，希望对刚入门的人有帮助。

　　关于Vue大屏数据显示的例子这篇文章到此为止。更多关于Vue大屏数据的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。