【开源项目】基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目

最新推荐文章于 2024-07-30 00:30:00 发布
最新推荐文章于 2024-07-30 00:30:00 发布
阅读量3.1k 收藏 13
点赞数
分类专栏： 开源项目 文章标签： 可视化
原文链接：https://mp.weixin.qq.com/s/-vGSSAVZ3ZXT1WvYvhSSwQ
版权

简介

大屏设计（AJ-Report）是一个可视化拖拽编辑的全开源项目，直观，酷炫，具有科技感的图表工具。内置的基础功能包括数据源，数据集，报表管理。

多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，支持17种大屏组件，不会开发，照着设计稿也可以制作大屏。

三步轻松完成大屏设计：配置数据源—->写SQL配置数据集—->拖拽配置大屏—->保存发布。欢迎体验。

数据流程图

图片

核心技术

后端

  • Spring Boot2.3.5.RELEASE: Spring Boot是一款开箱即用框架，让我们的Spring应用变的更轻量化、更快的入门。在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用；

  • Mybatis-plus3.3.2: MyBatis-plus（简称 MP）是一个 MyBatis (opens new window) 的增强工具。

  • flyway5.2.1: 主要用于在你的应用版本不断升级的同时，升级你的数据库结构和里面的数据

前端

  • npm：node.js的包管理工具，用于统一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。

  • webpack：用于现代 JavaScript 应用程序的_静态模块打包工具

  • ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。

  • vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。

  • vue-router：Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。

  • element-ui：基于MVVM框架Vue开源出来的一套前端ui组件。

  • avue: 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移动

  • vue-echarts: vue-echarts是封装后的vue插件,基于 ECharts v4.0.1+ 开发

  • vue-superslide: Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本

  • vuedraggable: 是一款基于Sortable.js实现的vue拖拽插件。

截图

图片

图片

图片

图片

图片

源码：gitee.com/anji-plus/report
模板：gitee.com/52itstyle/visual-large-screen

roc_lpy
关注
专栏目录
前端10大开源拖拽排序库汇总, 让搭建,更简单
趣谈前端
04-01 4832
❝hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代码可视化」和「前端工程化」相关的话题, 今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.❞1. dragula一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.「...
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
程序员闪充宝
07-20 2376
整理：抓哇笔记简介大屏设计（AJ-Report）是一个可视化拖拽编辑的全开源项目，直观，酷炫，具有科技感的图表工具。内置的基础功能包括数据源，数据集，报表管理。多数据源支持，内置mysql...
推荐一款面向所有人的开源数据可视化分析工具，丰富的数据源支持，无需编写代码即可制作个性化的图表和大屏（附源码）
最新发布
m0_68103752的博客
07-30 1342
一款开源的数据可视化分析工具，以其易用性、灵活性和开源特性，为企业提供了一个高效、低成本的数据可视化解决方案。
【DataRoom】- 基于VUE的开源的大屏可视化设计器
老杜的博客
03-03 8951
DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器，具备大屏设计、预览能力，支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy等数据集接入，使用简单，完全免费，代码开源。
一款开源、免费、炫酷的可视化大屏设计器，只需拖拉拽即可使用
小透明的博客
05-22 5337
DataRoom是一个基于SpringBootElementUIG2PlotEcharts等流行技术栈开发的开源大屏设计器，它不仅具备强大的数据管理和设计能力，还提供了丰富的数据源接入和数据处理功能。DataRoom是一个功能全面的大屏设计器，它允许用户通过可视化界面轻松地创建和管理大屏项目。借助于先进的前后端技术，DataRoom确保了高效的运行性能和良好的用户体验。作为一个完全免费的开源项目，DataRoom旨在帮助用户快速构建个性化的数据展示平台。
推荐开源项目：VDesJS-Drag - 轻量级的可视化拖拽布局库
gitblog_00030的博客
04-02 868
推荐开源项目：VDesJS-Drag - 轻量级的可视化拖拽布局库 项目地址:https://gitcode.com/china-bin/vdesjs-drag 在今天的数字化世界中，用户交互体验已经成为产品成功的关键因素之一。为了创建直观且易用的界面，开发人员越来越倾向于采用可视化布局工具。今天，我们向您推荐一款轻量级、高效的JavaScript库——VDesJS-Drag，它提供了一种强大的拖...
基于SpringBoot和Vue3的数据可视化大屏工具源码，支持多数据源及拖拽式编辑
03-25
项目概述：这是一款基于SpringBoot后端框架与Vue3前端框架开发的数据可视化大屏工具，其设计宗旨在于让非编程人员也能轻松创建专业级的数据展示大屏。支持多种数据接入，包括Excel、API接口以及常见的数据库如MySQL...
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目（源码）
03-13
  AJ-Report是全开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。...大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目-AJ-Report
05-09
AJ-Report由 安吉加加 开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。     多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，支持17种...
SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
2401_83739472的博客
04-03 495
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它。
超级大屏幕V1.0.8全开源解密版
09-28
超级大屏幕 查看更多关于 超级大屏幕 的文章 具有开幕墙、闭幕墙、消息墙、抽奖、签到、嘉宾展示、抢红包功能，利用开幕墙对整个活动的展示介绍、也适合活动进行中的间歇时间、消息墙可以再等待和互动的时候，让员工发布消息，是一款非常流行的微信大屏幕系统。 重要说明：付费报名模式目前只支持开通微信支付的服务号。 1、本模块支持开幕墙、闭幕墙、消息墙、二维码扫描墙、3D签到墙（支持logo签到和文字签到）（4种展示效果）、多奖品切换现场抽奖、酷炫互动疯狂抢红包、嘉宾墙等，后续将再新增多个墙，敬请期待； 2、每个大屏幕都支持自定义背景、和背景有音乐功能，购买的客户将免费赠送背景素材包； 3、现场抽奖奖品支持同时设置多个奖品，并且可以设置每个奖品的顺序，方便根据奖品价值安排抽奖顺序，奖品支持实物和红包()； 4、抢红包奖品支持实物、微信卡券、红包等，支持自定义奖品数量、概率等； 5、抢红包支持设置每个人最多中奖次数、超过了就不会再中奖了； 6、抢红包活动支持设置赞助商广告，粉丝的中奖提示页面会弹出赞助广告； 7、抢红包活动支持多波活动举办，支持一波活动结束后直接重置，之前中奖的数据不会被清空，后台和中奖者手机端都可以看到并且兑换红包。 8、红包奖品支持直接发送和提现两种模式，方便做大额红包奖励。 9、3D签到墙支持4种展示方式，前后台都可以自由切换，手机端签到可以支持是否需要填写个人信息，个人信息支持填写姓名、手机、公司/职位等； 10、大屏幕支持设置密码才能访问的功能； 11、消息墙支持开启是否需要消息审核的功能，支持同时发生消息和图片的功能，并且支持图片再显示的时候是否自动放大功能。 12、后台支持自定义活动流程说明，方便参与者再手机端直接查看活动流程。 13、支持开启和关闭强制关注才能参与活动的功能； 14、自带LBS限制地区功能，可以设置参与人的地区范围； 15、本模块只支持认证服务号使用（使用红包功能必须开通微信支付），其他非认证服务号的可以借用权限（借用权限的账号无法使用卡券功能）；
editJs:内部开源的html5 可视化拖拽编辑器
04-11
README 内部开源的html5 可视化拖拽编辑器 魔方 最初版本代码 最初版本核心代码 由本人编写 并交给公司内部孵化维护 核心目录 *素材的放大缩小 旋转 *文字标题的缩小旋转修改 *自定义box框生成 拉伸 修改 *自定义字体的切换 *调色板功能(内部开源版本 github没有放出) *canvas 和html画板切换(内部开源版本 github没有放出) *canvas画板完成了 思维导图的主要功能(内部开源版本 github没有放出) *动态生成圆角矩形(内部开源版本 github没有放出) *圆角矩形添加文字修改(内部开源版本 github没有放出) *贝塞尔曲线修改(内部开源版本 github没有放出) *通过正弦函数 和物理简谐运动 编写了缓动动画库 tw.js 使魔方动画更加流畅自然 所有功能 均为从零开发 没有使用任何三方库 只用原生js 开发
拖拽式可视化企业建站源码
01-09
自已测试过了，无错完整可视化拖拽式建站源码，菜鸟也可建站！ 入门快，简单易操作！开源无加密 欢迎下载交流
可视化大屏开源
金石软件
02-25 2406
1、https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi
vue大屏可视化开源组件
DN金猿的博客
11-01 2203
文档：DataV
QT 1、开源一款可视化大屏源码
Mr-zhou先生
09-21 3673
开源一款可视化大屏源码
这可能是目前最好用的开源可视化拖拽框架
不忘初心，坚定道路！
07-29 5651
前言 hello，大家好，我是dooringx-lib的作者。今天刚刚开源了我们dooringx项目的可视化拖拽框架dooringx-lib。 和别的开源项目比，dooringx-lib除了提供基础的编辑器功能，还有自己独特的弹窗系统与事件机制。 项目仓库：https://github.com/H5-Dooring/dooringx 项目文档：https://h5-dooring.github.io/dooringx/ 下面就来简单介绍一下。 编辑器基础功能 dooringx-lib的所有组件都是可拆分
Github热榜！几款炫酷的大屏可视化开源项目！帅呆了！
南七小僧的学海无涯
02-06 1621
大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。主要图表：柱状图、折线图、曲线面积图、地图、雷达图、环形图等。原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣。主要图表：地图、柱状图、条形图、曲线面积图、雷达图。主要图表：曲线面积图、环形图、柱状图(可滑动)等。主要图表：树形面积图、柱状图、环形图、雷达图等。主要图表：柱状图、气泡图、仪表盘图、折线图等。主要图表：条形图、仪表盘图、雷达图、水球图等。主要图表：条形图、柱状图、曲线图、环形图等。
springboot+vue实现大屏可视化
07-15
Spring Boot和Vue.js是一对很好的组合，可以实现大屏可视化的需求。下面是一个简单的示例，展示如何使用Spring Boot和Vue.js来实现大屏可视化。 首先，你可以使用Spring Boot来构建后端的API接口。你可以创建一个Controller类，定义一些请求映射的方法，用于提供数据给前端。 ```java @RestController @RequestMapping("/api") public class DataController { @GetMapping("/data") public List<Data> getData() { // 查询数据并返回 List<Data> dataList = new ArrayList<>(); // 数据处理逻辑... return dataList; } } ``` 接下来，你可以使用Vue.js来构建前端界面。你可以创建一个Vue组件，通过ajax请求后端API获取数据，并使用图表库（例如ECharts、Highcharts等）来展示可视化数据。 ```vue <template> <div> <h1>大屏可视化</h1> <div id="chart"></div> </div> </template> <script> import axios from 'axios'; import echarts from 'echarts'; export default { mounted() { this.fetchData(); }, methods: { fetchData() { axios.get('/api/data') .then(response => { const data = response.data; this.renderChart(data); }) .catch(error => { console.error(error); }); }, renderChart(data) { const chart = echarts.init(document.getElementById('chart')); // 根据数据绘制图表 // ... } } } </script> ``` 以上是一个简单的示例，通过Spring Boot提供数据接口，Vue.js获取数据并展示可视化图表。你可以根据具体需求进行扩展和优化。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值