JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V5 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • AI + RAG + CMS 人工智能
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V5 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • AI + RAG + CMS 人工智能
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 后端开发手册

  • Vue前端手册

  • 经典前端手册

  • 扩展功能专题

    • BPM 业务流程系统
    • 用户类型、类型扩展
    • 消息推送、消息提醒
    • 单点登录、OAuth2
    • 作业监控、任务调度
    • 对象存储、文件存储
    • 可视化数据大屏
      • 简介
      • 部署方法
        • 引入模块依赖
        • 初始化数据库
      • 自定义配置
      • 自定义组件
      • 20+常用组件
      • 数据格式介绍
        • 接口地址
        • 柱状图
        • 折线图
        • 饼图
        • 象型图
        • 雷达图
        • 散点图
        • 漏斗图
        • 轮播图
        • 地图
      • 高级应用
        • 数据处理
        • 提示事件
        • 点击事件
        • 标题事件
    • 在线报表设计器
    • 文件管理、文件柜
    • 在线预览图片文档
    • 手机端移动端、Uni-App
    • CMS 内容管理系统
    • AI 知识库智能助手
    • 涉密 “三员” 管理
    • OAauth2 统一认证服务
  • 云服务技术架构

  • 技术支持与服务

大屏设计器、拖拽轻松实现可视化数据大屏

# 简介

本模块是可视化数据大屏解决方案,前端采用 Avue (opens new window),后端采用 JeeSite 与您的业务系统数据完美结合。

特点如下

  1. 拖拽即可无需编程就能轻松搭建数据大屏
  2. 多种图表组件支撑多种数据类型的分析展示
  3. 多种数据源接入(接口数据/静态数据)
  4. 可视化,图形化的搭建工具,方便快捷
  5. 多分辨率适配发布,满足您不同场合使用
  6. 自定义组件扩展, 轻松二次开发
  7. 轻量级安装超简单, 使用简单
  8. 采用强大的 JeeSite 后端支撑

相关链接

  1. 演示地址:https://vue.jeesite.com/js/visual/index (opens new window)
  2. 在线文档: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

注意: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

# 折线图

数据格式

...
{
  "categories": [
    "苹果",
  ],
  "series": [{
    "name": "手机品牌",
    "data": [
      1000879,
    ]
  }]
}
...
1
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

# 象型图

数据格式

...
{
  "categories": [
    "苹果",
  ],
  "series": [{
    "name": "手机品牌",
    "data": [
      1000879,
    ]
  }]
}
...
1
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

# 散点图

数据格式

...
[{
  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

# 漏斗图

数据格式

...
[{
    value: 335,
    name: '直接访问'
  },
  {
    value: 310,
    name: '邮件营销'
  },
  {
    value: 234,
    name: '联盟广告'
}]
...
1
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

# 地图

数据格式

...
[
    "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

# 高级应用

# 数据处理

如果接口返回的数据格式和组件规定的格式不一致,您可以通过数据处理方法去二次加工数据

//data 接口返回的数据

(data) => {
	console.log(data); // 二次加工数据格式
	return data;
}
1
2
3
4
5
6

# 提示事件

如果数据移动到图表上需要展示的数据个性化定制(可以添加html标签和样式)

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

(name, data) => {
  return "返回需要展示的文本"
}
1
2
3
4
5
6

# 点击事件

图表的点击事件(如地球标点)

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

({name,type,value,data}) => {
  // 做一些点击的逻辑
}
1
2
3
4
5
6
7
8

# 标题事件

组件顶部显示的文字(如柱状图顶部)

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

({name,data}) => {
 return "返回要展示的数据"
}
1
2
3
4
5
6
进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← 对象存储、文件存储 在线报表设计器→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2025 济南卓源软件有限公司 版权所有 | Theme Vdoing

请关注 JeeSite 微信公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式