大屏设计器、拖拽轻松实现可视化数据大屏
# 简介
本模块是可视化数据大屏解决方案，前端采用 Avue (opens new window)，后端采用 JeeSite 与您的业务系统数据完美结合。
特点如下
- 拖拽即可无需编程就能轻松搭建数据大屏
- 多种图表组件支撑多种数据类型的分析展示
- 多种数据源接入（接口数据/静态数据）
- 可视化，图形化的搭建工具，方便快捷
- 多分辨率适配发布，满足您不同场合使用
- 自定义组件扩展， 轻松二次开发
- 轻量级安装超简单， 使用简单
- 采用强大的 JeeSite 后端支撑
相关链接
- 演示地址：https://vue.jeesite.com/js/visual/index (opens new window)
- 在线文档：https://www.kancloud.cn/thinkgem/avue-data/content (opens new window)
# 部署方法
# 引入模块依赖
<!-- 数据大屏设计 -->
<dependency>
<groupId>com.jeesite</groupId>
<artifactId>jeesite-module-visual</artifactId>
<version>${project.parent.version}</version>
</dependency>
1
2
3
4
5
6
2
3
4
5
6
注意：v4.2.0+ 专业版提供，此模块依赖，请向售后人员索取。
# 初始化数据库
引入模块后执行：/web/bin/init-data.bat(sh) 即可初始化。
# 自定义配置
下载文件：https://vue.jeesite.com/js/visual/config.js (opens new window)
放到你的项目 /src/main/resources/visual/ 目录中，即可覆写。
# 自定义组件
- js文件方式：
下载文件：https://vue.jeesite.com/js/visual/components.js (opens new window)
放到你的项目 /src/main/resources/visual/ 目录中，即可覆写。
然后，在 config.js 里修改 componentsList 参数引用你的组件
- json配置方式：
下载文件：https://vue.jeesite.com/js/visual/components.json (opens new window)
放到你的项目 /src/main/resources/visual/ 目录中，即可覆写。
# 20+常用组件
- 图表
- 柱状图
- 折线图
- 饼图
- 象形图
- 雷达图
- 散点图
- 漏斗图
- 地图
- 文字
- 文本框
- 跑马灯
- 超链接
- 实时时间
- 媒体
- 图片
- 图片框
- 轮播图
- iframe
- video
- 指标
- 翻牌器
- 环形图
- 进度条
- 仪表盘
- 字符云
- 表格
- 选项卡
- 表格
- ...
# 数据格式介绍
# 接口地址
举例1：/js/a/sys/corpAdmin/treeData 举例2：./../a/sys/corpAdmin/treeData
# 柱状图
数据格式
...
{
"categories": [
"苹果",
],
"series": [{
"name": "手机品牌",
"data": [
1000879,
]
}]
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 折线图
数据格式
...
{
"categories": [
"苹果",
],
"series": [{
"name": "手机品牌",
"data": [
1000879,
]
}]
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 饼图
数据格式
...
[{
"name": "PC",
"value": 97,
"url": "http://www.baidu.com"
}]
...
1
2
3
4
5
6
7
2
3
4
5
6
7
# 象型图
数据格式
...
{
"categories": [
"苹果",
],
"series": [{
"name": "手机品牌",
"data": [
1000879,
]
}]
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 雷达图
数据格式
...
{
indicator: [{
name: '销售',
max: 6500
}],
series: [{
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配（Allocated Budget）'
}]
}]
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 散点图
数据格式
...
[{
data: [
[1, 8.04],
[2, 6.95]
]},
{
data: [
[1, 4.04],
[2, 3.95]
]
}]
...
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 漏斗图
数据格式
...
[{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
}]
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 轮播图
数据格式
...
[{
value: 图片地址1,
},
{
value: 图片地址2,
}]
...
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 地图
数据格式
...
[
"name": "测试坐标1",
"value": 1,
"lng": 118.30078125,
"lat": 36.91915611148194,
"zoom": 1
},
{
"name": "测试坐标2",
"value": 1,
"lng": 112.21435546875,
"lat": 37.965854128749434,
"zoom": 1
}
]
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 高级应用
# 数据处理
如果接口返回的数据格式和组件规定的格式不一致，您可以通过数据处理方法去二次加工数据
//data 接口返回的数据
(data) => {
console.log(data); // 二次加工数据格式
return data;
}
1
2
3
4
5
6
2
3
4
5
6
# 提示事件
如果数据移动到图表上需要展示的数据个性化定制（可以添加html标签和样式）
//name 移动上去的当前数据名字
//data 接口返回的数据
(name, data) => {
return "返回需要展示的文本"
}
1
2
3
4
5
6
2
3
4
5
6
# 点击事件
图表的点击事件（如地球标点）
//name 点击的当前数据名字
//type 点击的当前数据类型
//value 点击的当前数据值
//data 接口返回的数据
({name,type,value,data}) => {
// 做一些点击的逻辑
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 标题事件
组件顶部显示的文字（如柱状图顶部）
//name 点击的当前数据名字
//data 接口返回的数据
({name,data}) => {
return "返回要展示的数据"
}
1
2
3
4
5
6
2
3
4
5
6
