avue-data可视化大屏初体验

2024-05-25 04:37:37

介绍

首先介绍下Avue-data数据大屏，Avue-data数据大屏是基本vue、Element-UI、dataV开发的组件库。并且可以任意切换图表组件，而且不受度量的闲置。相应的代码的分前端和后端两套，需要同时启动才可以正常使用。建议搭建自己相应的后端服务，部署在自己的服务器使用。Avue-data官网

组件

Avue-data数据大屏中自带一些基于Element-ui开发的组件，可以满足一些日常开发中的需求。

也可以自己封装自定义组件，在菜单栏组件库的位置。

组件也可以配置数据源，这是组件目前支持的几种数据源

其中sql数据源需要新建数据源链接，来指定你链接的服务器以及数据库。

数据源返回数据在此处进行处理，最终return出处理值就可以。

依赖配置

Avue-data可视化大屏已经安装echarts与axios，所以代码中可以直接进行使用，不需要重复引入。（之前自己是在本地开发好的，代码复制到线上的，测试出现了一系列报错，在日常开发稍微注意下就可以了）

// axios可以直接使用
axios.get('url链接').then(res => {console.log(res)   // 最终数据
})
// 同理，echarts也可以直接进行使用
let chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
this.option && myChart.setOption(this.option);

组件交互联动与数据传递

例如点击事件，A与B组件进行交互，A组件需要将事件进行抛出，同时需要的参数也可以随之进行传递。

this.$emit('click', 参数)

然后可以的A组件点击事件处理中进行数据处理

如果需要给B组件进行赋值，可以在点击事件代码中，通过组件序号获取相应组件信息，找到需要赋值的属性即可。

// 通过组件序号可以获取序号对应组件的所有信息，自定义组件也可以获取自身的信息refs['70d001a1-d16e-44b7-b76e-0fcd2496d6c5']

如果B组件数据源为sql，A组件去调用B组件，B组件根据传参进行刷新，那么我们就需要全局变量这个东西了。

// A组件进行将参数保存在全局变量中，调用B组件去刷新
window.$glob.params//   为全局变量容器
window.$glob.params.data = data;
// B组件中可以根据全局变量来进行逻辑判断
let glob = window.$glob.params.data;
if(glob) {// 进行后续逻辑
}

avue-data可视化大屏初体验相关推荐

华为云平台零代码搭建物联网可视化大屏体验：疫情防控数据大屏
目录一.介绍二.准备三.搭建 1.创建疫情防控大屏应用 2.组件放置 3.组件配置 4.应用打包一.介绍零代码搭建物联网可视化大屏 :自定义物联网场景,根据个人理解实现基于华为云IoT以及可 ...
数据可视化：利用Python和Echarts制作“用户消费行为分析”可视化大屏
数据可视化:利用Python和Echarts制作"用户消费行为分析"可视化大屏前言实验目的: 准备工作: 一.创建项目: 二.建立数据库连接获取数据: 三.页面布局: 四.下载 ...
Qt编写可视化大屏电子看板系统24-模块2当月计划
一.前言延续分层模块化的设计思路,当月计划模块主要包括模具达成率.零件达成率.零件数.每日工序达成数5个子模块,其中模具达成率采用自定义控件环形图展示,比如计划多少达成多少,达成作为进度:零件达成率 ...
Qt编写可视化大屏电子看板系统14-标准曲线图
一.前言近期将可视化大屏电子看板系统重新规划和调整项目结构代码,几个重大改变是新增启动窗体选择,可选大屏系统.控件演示.模块演示三种,其中控件演示是专门针对本系统中用到的各种自定义控件单独做的使用d ...
可视化大屏原型图解决方案附axure可视化组件库
现在越来越多的数据展示方式采用了可视化大屏的策略,对数据项进行图表或者动态的展示.在没有产品原型的情况下,怎么制作一个简易的原型呢? 这里提供三种方式制作简易demo: 第一种:原生html+js实现 ...
熬了半宿做的表格PPT还是不能让老板客户满意？快来看看这些可视化大屏制作软件吧
在这个谁掌握的数据多谁就是强者的时代,如何快速理解数据想要表达的信息是我们提升生活质量和提高工作效率的一大杀手锏.以往我们使用的最多的数据展示软件多是Excel或PPT,但Excel只能整理数据,PP ...
用Python轻松创建一个交互式可视化大屏！
大家好,我是小z,也可以叫我阿粥本文将和大家一起学习一个专门为数据科学家(机器学习工程师)设计的基于 Python 的三方库 ---- Streamlit,它只需几行代码即可创建外观精美的应用程序, ...
用 Python 制作酷炫的可视化大屏，特简单！
作者 | 小F 来源 | 法纳斯特在数据时代,我们每个人既是数据的生产者,也是数据的使用者,然而初次获取和存储的原始数据杂乱无章.信息冗余.价值较低. 要想数据达到生动有趣.让人一目了然.豁然开朗的 ...
不到 100 行 Python 代码教你做出精美炫酷的可视化大屏
作者 |俊欣来源 |关于数据分析与可视化 "碳达峰.碳中和"是2021年政府在不断强调与非常重视的事儿,那什么是"碳达峰".什么又是"碳中和&quo ...

最新文章

热门文章