大屏设计器、拖拽轻松实现可视化数据大屏
# 简介
本模块是可视化数据大屏解决方案,前端采用 Avue (opens new window),后端采用 JeeSite 与您的业务系统数据完美结合。
特点如下
- 拖拽即可无需编程就能轻松搭建数据大屏
- 多种图表组件支撑多种数据类型的分析展示
- 多种数据源接入(接口数据/静态数据)
- 可视化,图形化的搭建工具,方便快捷
- 多分辨率适配发布,满足您不同场合使用
- 自定义组件扩展, 轻松二次开发
- 轻量级安装超简单, 使用简单
- 采用强大的 JeeSite 后端支撑
相关链接
- 演示地址:https://demo.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)
即可初始化。
# 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