概述 · 数据大屏文档

## 简介[](https://jeesite.com/docs/visual/#简介) 本模块是可视化数据大屏解决方案，前端采用 Avue，后端采用 JeeSite 与您的业务系统数据完美结合。 **特点如下** 1. 拖拽即可无需编程就能轻松搭建数据大屏 2. 多种图表组件支撑多种数据类型的分析展示 3. 多种数据源接入（接口数据/静态数据） 4. 可视化，图形化的搭建工具，方便快捷 5. 多分辨率适配发布，满足您不同场合使用 6. 自定义组件扩展，轻松二次开发 7. 轻量级安装超简单，使用简单 ## 部署方法 ### 引入模块依赖 ~~~  <dependency> <groupId>com.jeesite</groupId> <artifactId>jeesite-module-visual</artifactId> <version>${project.parent.version}</version> </dependency> ~~~ 注意：此功能是专业版功能（https://jeesite.com/docs/support/） ### 初始化数据库引入模块后执行：`/web/bin/init-data.bat(sh)`即可初始化。 ## 20+常用组件 * 图表 * 柱状图 * 折线图 * 饼图 * 象形图 * 雷达图 * 散点图 * 漏斗图 * 地图 * 文字 * 文本框 * 跑马灯 * 超链接 * 实时时间 * 媒体 * 图片 * 图片框 * 轮播图 * iframe * video * 指标 * 翻牌器 * 环形图 * 进度条 * 仪表盘 * 字符云 * 表格 * 选项卡 * 表格 * … ## 其他例子[](https://jeesite.com/docs/visual/#其他例子) * [数据格式化例子](https://data.avuejs.com/build/16) * [选项卡例子](https://data.avuejs.com/build/18) * [地图事件例子](https://data.avuejs.com/build/19) * [柱状图和折线图](https://data.avuejs.com/build/28) * [任意ECharts使用](https://data.avuejs.com/build/29) ## 数据格式介绍[](https://jeesite.com/docs/visual/#数据格式介绍) ### 接口地址举例1：/js/a/sys/corpAdmin/treeData 举例2：./../a/sys/corpAdmin/treeData ### 柱状图 > 数据格式 ~~~ ... { "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 } ] ... ~~~ ## 高级应用[](https://jeesite.com/docs/visual/#高级应用) ### 数据处理 > 如果接口返回的数据格式和组件规定的格式不一致，你可以通过数据处理方法去二次加工数据 ~~~ //data 接口返回的数据 (data) => { console.log(data); // 二次加工数据格式 return data; } ~~~ ### 提示事件 > 如果数据移动到图表上需要展示的数据个性化定制（可以添加html标签和样式） ~~~ //name 移动上去的当前数据名字 //data 接口返回的数据 (name, data) => { return "返回需要展示的文本" } ~~~ ### 点击事件 > 图表的点击事件（如地球标点） ~~~ //name 点击的当前数据名字 //type 点击的当前数据类型 //value 点击的当前数据值 //data 接口返回的数据 ({name,type,value,data}) => { // 做一些点击的逻辑 } ~~~ ### 标题事件 > 组件顶部显示的文字（如柱状图顶部） ~~~ //name 点击的当前数据名字 //data 接口返回的数据 ({name,data}) => { return "返回要展示的数据" } ~~~