JeeSite 4.x

Spring Boot 最好的快速开发平台

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

简介

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

特点如下

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

相关链接

  1. 演示地址:https://data.avuejs.com
  2. 备用地址:https://demo.jeesite.com/js/visual/index
  3. 在线文档:https://www.kancloud.cn/smallwei/avue-doc/content

部署方法

引入模块依赖

<!-- 数据大屏设计 -->
<dependency>
	<groupId>com.jeesite</groupId>
	<artifactId>jeesite-module-visual</artifactId>
	<version>${project.parent.version}</version>
</dependency>

注意:此功能是专业版功能(联系技术支持获取私服地址)

初始化数据库

引入模块后执行:/web/bin/init-data.bat(sh) 即可初始化。

20+常用组件

  • 图表
    • 柱状图
    • 折线图
    • 饼图
    • 象形图
    • 雷达图
    • 散点图
    • 漏斗图
    • 地图
  • 文字
    • 文本框
    • 跑马灯
    • 超链接
    • 实时时间
  • 媒体
    • 图片
    • 图片框
    • 轮播图
    • iframe
    • video
  • 指标
    • 翻牌器
    • 环形图
    • 进度条
    • 仪表盘
    • 字符云
  • 表格
    • 选项卡
    • 表格

其他例子

数据格式介绍

柱状图

数据格式

...
{
  "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
  }
]
...

高级应用

数据处理

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

//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 "返回要展示的数据"
}

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