首页 前端知识 avue-data可视化大屏初体验

avue-data可视化大屏初体验

2024-02-05 11:02:28 前端知识 前端哥 512 195 我要收藏

介绍

首先介绍下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) {
	// 进行后续逻辑
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1376.html
标签
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!