需求

采用Vue结合Echarts制作了数据大屏，由于每个组件占用的空间较小，展示起来不够清晰，所以需要在展示大屏之后，每隔一段时间，就对各组件进行全屏轮播，更好的对总体数据进行展示

分析

在父组件中定义好所有需要轮播的组件，在script脚本中定时指定需要展示的组件索引，最后通过v-if-else判断对指定的组件进行渲染展示；同时，如组件需通过向子组件传参的形式，来控制在不同空间下，组件的展示效果

实现

<template><div id="report"><dv-full-screen-container class="bg"><xg v-if="index == 1"></xg><xgLeftTop v-else-if="index == 2" :c1="c1"></xgLeftTop></dv-full-screen-container></div>
</template><script>import xgLeftTop from "../components/report/xgLeftTop";import xg from "../components/report/xg";export default {name: "report",data() {return {c1: { // 组件1传参，用于控制空间变化时，图表展示更为合理t1:0.3,f1: 20},num: 2, // 组件的个数index: 1 // 组件的索引}},mounted(){//Todo 设置组件轮播间隔setInterval(() => {setTimeout(this.fresh, 0)}, 6000)},methods: {//Todo 指定展示的目标索引fresh() {if ( this.index >= this.num){this.index = 1}else {this.index = this.index + 1}},},components: {xgLeftTop,xg}}
</script><style lang="scss" scoped>#report {.bg {color: #d3d6dd;background-color: #000000;background-image: url("../assets/picture/report/report.png");background-size: cover;background-position: center, center;width: 100%;height: 100vh;}}
</style>

备注

1.制作好需要展示的组件，指定统一入口，通过v-if-else结合script脚本控制隔多久展示哪一个组件
2.通过父组件向子组件传参，来控制子组件的表现形式

Vue实现数据大屏组件轮播效果相关推荐

vue中实现无缝衔接的轮播效果
今天写项目的时候有一个要求,完成一个类似表格的轮播效果. 安装 npm install vue-seamless-scroll --save 引入(在需要用到的组件引入即可) import vueSe ...
Vue 前端数据大屏适配
逻辑分析: 采用了css3的缩放transform: scale(X)属性,我们不难发现本人改变分辨率时,scale的值是变化的.前端小伙们们看到这,想必也已经明白了大概. 我们只要监听浏览器窗口大的 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
Quick BI 数据大屏快速入门
数据大屏是面向企业数据消费者,将可视化和场景叙事技术结合,运行在智能设备上,非接触式连接的酷炫大屏,满足CXO大盘.业务监控.以及对外PR等场景.从而推动企业数据群体消费. 数据大屏的常见应用场景包括 ...
基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...
可视化搭建数据大屏系统的前端实现
随着公司业务的发展,经常会收到一些数据大屏的需求.目前我司有两种实现方案,一是人肉搭建,二是用阿里云 DataV 搭建. 人肉搭建,在本地脚手架开发环境中进行编码,有大量的重复劳动,能力复用性差,占用 ...
web大屏展示用到的组件_从零开始设计数据大屏—基于Vue
为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的生活.但大数据在不是从事技术开发的人来说没有很明显的感受,很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上. ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...

Vue实现数据大屏组件轮播效果

Vue实现数据大屏组件轮播效果

需求

分析

实现

备注

Vue实现数据大屏组件轮播效果相关推荐

最新文章

热门文章