avue-data可视化大屏初体验

介绍

首先介绍下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) {
	// 进行后续逻辑
}