319 lines
5.2 KiB
Markdown
319 lines
5.2 KiB
Markdown
# 数据大屏解决方案
|
||
|
||
## 介绍
|
||
数据大屏解决方案采用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问题
|
||
}
|
||
```
|