# 数据大屏解决方案

## 介绍
数据大屏解决方案采用vue-cli项目编写,可以完美嵌套与任何项目,此项目只是大屏的解决方案,如果想要用于生产或更多场景的支持需要自己根据情况二次开发。  

## 2种数据源
- 在线api(本项目采用了mock拦截方式模拟,具体文件/mock/index.js)
- 静态数据
- ...

## 引入其他项目使用
执行npm run lib 打出对应的包(public/lib)
- index.css
- index.umd.min.js  
引入相应的文件即可,可以参考public/view.html文件,传入对应的id,打开对应的大屏幕,例如view.html?id=xxxx
- [例子1](https://data.avuejs.com/view.html?id=5)
- [例子2](https://data.avuejs.com/view.html?id=8)

## 20+常用组件
- 图表
  - 柱状图
  - 折线图
  - 饼图
  - 象形图
  - 雷达图
  - 散点图
  - 漏斗图
  - 地图
- 文字
  - 文本框
  - 跑马灯
  - 超链接
  - 实时时间
- 媒体
  - 图片
  - 图片框
  - 轮播图
  - iframe
  - video
- 指标
  - 翻牌器
  - 环形图
  - 进度条
  - 仪表盘
  - 字符云
- 表格
  - 选项卡
  - 表格
- ...

## 自定义组件
- 组件配置
- /src/components/test/index
- /src/components/test/option
- 添加组件
- /src/option/base.js
- /src/option/components.js

## 其他例子
- [数据格式化例子](https://data.avuejs.com/build/16)
- [选项卡例子](https://data.avuejs.com/build/18)
- [地图事件例子](https://data.avuejs.com/build/19)
- [柱状图和折线图](https://data.avuejs.com/build/28)
- [任意echart使用](https://data.avuejs.com/build/29)

## 核心方法
### 提示事件
>如果数据移动到图表上需要展示的数据个性化定制(可以添加html标签和样式)  

```
//name 移动上去的当前数据名字
//data 接口返回的数据

(name,data) => {
  return 返回需要展示的文本
}
```
### 数据处理
>如果接口返回的数据格式和组件规定的格式不一致,数据处理方法去处理加工数据  

```
//data 接口返回的数据

(data) => {
  return //这里处理成标准的数据格式,详情参考下面附录1
}
```
### 点击事件
>图表的点击事件

```
//name  点击的当前数据名字
//type  点击的当前数据类型
//value 点击的当前数据值
//data  接口返回的数据

({name,type,value,data}) => {
  //做一些点击的逻辑
}
```
### 标题事件
>组件顶部显示的文字(如柱状图顶部)

```
//name  点击的当前数据名字
//data  接口返回的数据

({name,data}) => {
 return 返回要展示的数据
}
```

## 通用属性
```
{
  name:'组件名称',
  title:'组件别名',
  icon:'组件图标',
  left:'组件x位置',
  top:'组件y位置',
  display:'组件隐藏',
  dataType:'数据请求格式| 0-静态数据 | 1-动态数据',
  dataMethod:'数据请求方式| get | post,
  url:'动态数据的请求地址',
  time:'数据的刷新间隔',
  //组件的配置
  component:{ 
    width:'组件的宽度',
    height:'组件的高度',
    name:'加载组件名',
    prop:'加载组件的类型',
  },
  //属性配置
  option:{ 
      //每个组件的独立属性
  }
}
```
## 技术栈
- vue //底层核心包  
- axios //发送ajax请求数据的  
- element-ui //底层ui支持包  
- echart //底层的图表支持包  
- echarts-wordcloud //字浮云支持包  
- avue //大屏组件支持包  
- swiper //滑动和轮播支持包  
- Sortable和vuedraggable // 图拽支持包  

## 附录1
### 柱状图
>数据格式

```
...
{
  "categories": [
    "苹果",
  ],
  "series": [{
    "name": "手机品牌",
    "data": [
      1000879,
    ]
  }]
}
...
```
### 折线图
>数据格式

```
...
{
  "categories": [
    "苹果",
  ],
  "series": [{
    "name": "手机品牌",
    "data": [
      1000879,
    ]
  }]
}
...
```
### 饼图
>数据格式

```
...
[{
    "name": "PC",
    "value": 97,
    "url": "http://www.baidu.com"
}]
...
```
### 象型图
>数据格式

```
...
{
  "categories": [
    "苹果",
  ],
  "series": [{
    "name": "手机品牌",
    "data": [
      1000879,
    ]
  }]
}
...
```
### 雷达图
>数据格式

```
...
{
  indicator: [{
    name: '销售',
    max: 6500
  }],
  series: [{
    data: [{
      value: [4300, 10000, 28000, 35000, 50000, 19000],
      name: '预算分配(Allocated Budget)'
    }]
  }]
}
...
```
### 散点图
>数据格式

```
...
[{
  data: [
    [1, 8.04],
    [2, 6.95]
]},
{
  data: [
    [1, 4.04],
    [2, 3.95]
  ]
}]
...
```
### 漏斗图
>数据格式

```
...
[{
    value: 335,
    name: '直接访问'
  },
  {
    value: 310,
    name: '邮件营销'
  },
  {
    value: 234,
    name: '联盟广告'
}]
...
```
### 轮播图
>数据格式

```
...
[{
    value: 图片地址1,
},
{
  value: 图片地址2,
}]
...
```

### 地图
>数据格式

```
...
[
    "name": "测试坐标1",
    "value": 1,
    "lng": 118.30078125,
    "lat": 36.91915611148194,
    "zoom": 1
  },
  {
    "name": "测试坐标2",
    "value": 1,
    "lng": 112.21435546875,
    "lat": 37.965854128749434,
    "zoom": 1
  }
]
...
```

## 项目部署

```
//nginx为例子
location /{
    root /data/avue/avue-data;
    index index.html;
    error_page 404 /index.html; //根据vue路由特性,这句一定要配置,否则会出现404问题
}  
```