简介这是一款面向企业数据分析师、低代码平台使用者及前端/后端开发者的可视化大屏构建工具旨在降低专业级数据看板的制作门槛让非编程人员也能通过拖拽快速完成多源数据整合与动态展示。资源包共563个文件以433个JavaScript文件支撑Vue3交互逻辑与组件编排102张PNG图片提供图表图标与界面素材19个CSS样式文件保障响应式布局与主题定制辅以字体、HTML入口及LICENSE等必要文件整体压缩包仅23.82MB轻量易部署。已有1218人学习下载说明其在实际业务场景中具备较强落地价值。用户可直接运行前后端工程获得完整的大屏编辑器、多数据源连接器支持Excel、REST API及MySQL/Oracle/SQL Server、实时预览与导出功能并基于清晰的模块化目录结构如views、components、api、utils进行二次开发或功能扩展。1. 这不是又一个“大屏模板”而是一套可落地的数据可视化协同工作流当你在企业内部接到“做一个实时数据大屏”的需求时真正卡住的往往不是图表画得美不美而是MySQL 和 PostgreSQL 的订单表字段名不一致怎么统一接入业务部门临时要加一个 Kafka 流式指标后端要不要改接口运营人员想调整布局但不会写 Vue每次改个位置都得找前端发版这套基于 SpringBoot 和 Vue3 的数据可视化大屏工具直击这三个痛点——它把「多数据源抽象」做进后端服务层把「拖拽式编辑」固化为前端可复用的低代码组件模型把「配置即部署」落到 yml 数据库元数据双驱动机制。适合中型团队中既懂 Java 后端又熟悉 Vue3 生态的全栈工程师快速搭建 BI 看板也适合前端主导、后端提供标准化数据契约的协作场景。它不追求炫酷动效但能让你在 2 小时内完成从数据库连接到大屏上线的完整闭环。2. 多数据源统一建模SpringBoot 如何让 MySQL、MongoDB、HTTP API 共享同一套查询语法2.1 为什么不能只靠 MyBatis 或 JPA数据源异构性是核心瓶颈传统 SpringBoot 项目接入多数据源时常见做法是为每种类型单独写 DAO 层MySQL 用MapperMongoDB 用MongoTemplateHTTP 接口封装RestTemplate。这种写法导致三类问题一是前端请求需区分/api/mysql/order-count、/api/mongo/user-active、/api/http/third-party-sales路由逻辑碎片化二是指标计算逻辑如同比、环比、TOP5无法跨源复用三是新增数据源时需同步修改 Controller、Service、DTO 三层耦合度高。本方案采用「数据源适配器 统一查询 DSL」模式将物理数据源与逻辑视图解耦。关键在于定义一套轻量级查询描述语言非 SQL例如# query.yaml 示例 id: sales_summary dataSource: mysql_orders type: aggregation params: groupBy: [region, product_category] metrics: - name: total_amount func: sum field: amount - name: order_count func: count field: id filters: - field: created_at op: value: ${TODAY-7D}提示${TODAY-7D}是运行时解析的占位符由QueryContextResolver统一处理避免硬编码时间字符串也规避了不同数据库日期函数语法差异如 MySQL 的DATE_SUB(NOW(), INTERVAL 7 DAY)vs PostgreSQL 的CURRENT_DATE - INTERVAL 7 days。2.2 实现统一查询引擎DataSourceAdapter 与 QueryExecutor 的职责分离后端核心结构由两层组成DataSourceAdapter负责将 DSL 映射为各数据源原生操作QueryExecutor负责执行、缓存、超时控制与结果归一化。以 MongoDB 为例其 Adapter 实现关键逻辑如下Component public class MongoDataSourceAdapter implements DataSourceAdapter { private final MongoTemplate mongoTemplate; Override public QueryResult execute(QueryDefinition def) { // 1. 将 DSL 中的 groupBy 字段转为 Aggregation.group() Aggregation aggregation Aggregation.newAggregation( Aggregation.match(Criteria.where(created_at).gte(parseDate(def.getFilters()))), Aggregation.group(def.getGroupBy().toArray(new String[0])) .sum(amount).as(total_amount) .count().as(order_count) ); // 2. 执行并映射为标准 QueryResult 结构 ListDocument result mongoTemplate.aggregate(aggregation, orders, Document.class).getMappedResults(); return QueryResult.fromDocuments(result); } }QueryResult是统一返回结构包含headers列名及类型、rows二维 Object 数组、meta执行耗时、数据条数等。所有数据源 Adapter 都实现同一接口由DataSourceAdapterFactory根据def.dataSource动态选择实例。这样Controller 层只需暴露单一入口RestController RequestMapping(/api/query) public class QueryController { private final QueryExecutor queryExecutor; PostMapping public ResponseEntityQueryResult execute(RequestBody QueryDefinition def) { try { QueryResult result queryExecutor.execute(def); return ResponseEntity.ok(result); } catch (QueryExecutionException e) { return ResponseEntity.badRequest().body(QueryResult.error(e.getMessage())); } } }2.3 多数据源配置管理application.yml 中的声明式定义在application.yml中数据源不再仅配置连接信息而是注册为可被 DSL 引用的「逻辑名称」datasources: mysql_orders: type: mysql url: jdbc:mysql://localhost:3306/erp?useSSLfalse username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mongo_analytics: type: mongodb uri: mongodb://localhost:27017 database: analytics http_thirdparty: type: http baseUrl: https://api.example.com/v1 timeout: 5000 headers: Authorization: Bearer ${THIRD_PARTY_TOKEN}SpringBoot 启动时DataSourceRegistry自动扫描datasources下所有配置初始化对应 Adapter 并注入QueryExecutor。新增数据源只需添加 YAML 片段无需编译代码——这是支撑「拖拽编辑时实时预览」的前提。3. 拖拽式编辑的核心Vue3 Composition API 如何构建可序列化的画布组件树3.1 画布数据结构设计ComponentConfig 与 LayoutSchema 的双向绑定大屏编辑的本质是维护一个可序列化的组件树。每个组件图表、文本、计数器不是独立 DOM 节点而是ComponentConfig对象包含id、type如echarts-bar、text-block、props图表配置、文字内容、positionx/y/width/height和dataSource关联的 query.yaml ID。整个画布由LayoutSchema描述// types.ts export interface ComponentConfig { id: string; type: string; props: Recordstring, any; position: { x: number; y: number; width: number; height: number }; dataSource?: string; // 对应 backend /api/query 的 query id } export interface LayoutSchema { version: 1.0; title: string; components: ComponentConfig[]; grid: { cols: number; rows: number; gutter: number }; // 响应式栅格基础 }Vue3 组件使用defineProps和defineEmits实现父子通信但关键在于useCanvasStore—— 一个基于ref和watch的响应式状态管理// composables/useCanvasStore.ts import { ref, watch, onMounted } from vue; import { LayoutSchema, ComponentConfig } from /types; export function useCanvasStore() { const schema refLayoutSchema({ version: 1.0, title: 默认大屏, grid: { cols: 24, rows: 100, gutter: 10 }, components: [] }); // 监听 schema 变更自动保存到 localStorage编辑态 watch(schema, (newVal) { localStorage.setItem(canvas-schema, JSON.stringify(newVal)); }, { deep: true }); const addComponent (type: string, config: PartialComponentConfig) { const newComp: ComponentConfig { id: comp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}, type, props: {}, position: { x: 0, y: 0, width: 4, height: 3 }, ...config }; schema.value.components.push(newComp); }; return { schema, addComponent }; }3.2 拖拽交互实现基于vueuse/core的 useDraggable 与碰撞检测拖拽不是简单监听mousedown/mousemove而是利用useDraggable封装的防抖、边界限制与坐标转换!-- CanvasItem.vue -- template div refitemRef classcanvas-item :style{ left: ${component.position.x}px, top: ${component.position.y}px, width: ${component.position.width}px, height: ${component.position.height}px } component :isgetComponent(component.type) :propscomponent.props :data-sourcecomponent.dataSource update-datahandleDataUpdate / /div /template script setup langts import { useDraggable, useElementSize } from vueuse/core; import { ref, onMounted } from vue; import { useCanvasStore } from /composables/useCanvasStore; const props defineProps{ component: ComponentConfig; }(); const emit defineEmits([update:position]); const itemRef refHTMLElement | null(null); const { width, height } useElementSize(itemRef); // 初始化拖拽限制在画布范围内假设画布宽 1920px高 1080px const { x, y } useDraggable(itemRef, { initialValue: { x: props.component.position.x, y: props.component.position.y }, onStart: () { // 记录初始位置用于后续校验 }, onMove: ({ x, y }) { // 校验是否超出画布x ∈ [0, 1920-width], y ∈ [0, 1080-height] const boundedX Math.max(0, Math.min(1920 - width.value, x)); const boundedY Math.max(0, Math.min(1080 - height.value, y)); emit(update:position, { x: boundedX, y: boundedY }); } }); /scriptonMove中的边界校验确保组件不会拖出可视区域而emit(update:position)触发父组件更新schema中对应component.position从而触发watch自动持久化。3.3 组件属性面板如何用 JSON Schema 动态生成配置表单当点击某个组件时右侧属性面板需根据component.type加载不同配置项。本方案采用轻量级 JSON Schema 渲染// schemas/echarts-bar.json { title: 柱状图配置, type: object, properties: { title: { type: string, title: 图表标题 }, xAxis: { type: string, title: X轴字段, default: region }, yAxis: { type: string, title: Y轴字段, default: total_amount }, color: { type: string, title: 主色, format: color } } }Vue3 组件SchemaForm.vue使用v-model绑定component.props通过vue/composition-api的reactive实现双向同步template el-form :modelform label-width100px el-form-item v-for(field, key) in schema.properties :keykey :labelfield.title el-input v-iffield.type string v-modelform[key] / el-color-picker v-else-iffield.format color v-modelform[key] / /el-form-item /el-form /template script setup langts import { reactive, watch } from vue; import schema from /schemas/echarts-bar.json; const props defineProps{ initialProps: Recordstring, any; }(); const form reactive({ ...props.initialProps }); watch(form, (newVal) { // 向父组件 emit 更新事件 emit(update:props, newVal); }, { deep: true }); /script这样新增一种图表类型只需提供一份 JSON Schema 和对应的渲染组件无需修改主画布逻辑。4. 数据源与组件的动态绑定如何让 ECharts 图表自动订阅 Query DSL 结果4.1 前端数据流设计useQueryResult 与组件生命周期的精准对齐ECharts 组件不能简单在mounted时请求一次数据而需建立「查询定义 → 数据响应 → 图表重绘」的持续链路。useQueryResultHook 封装了这一逻辑// composables/useQueryResult.ts import { ref, onUnmounted, onBeforeUnmount } from vue; import { fetchQuery } from /api/query; export function useQueryResult(queryId: string) { const data refany[]([]); const loading ref(true); const error refstring | null(null); // 创建 AbortController 实例用于取消请求 const controller new AbortController(); const refresh async () { loading.value true; error.value null; try { const result await fetchQuery(queryId, { signal: controller.signal }); data.value result.rows || []; } catch (e) { if (e.name ! AbortError) { error.value e.message; } } finally { loading.value false; } }; // 组件卸载时取消请求 onBeforeUnmount(() { controller.abort(); }); // 初始加载 refresh(); return { data, loading, error, refresh }; }ECharts 组件内直接调用!-- EChartsBar.vue -- script setup langts import { ref, onMounted, watch } from vue; import * as echarts from echarts; import { useQueryResult } from /composables/useQueryResult; const props defineProps{ dataSource: string; props: Recordstring, any; }(); const chartRef refHTMLElement | null(null); const chartInstance refecharts.ECharts | null(null); const { data, loading } useQueryResult(props.dataSource); onMounted(() { if (chartRef.value) { chartInstance.value echarts.init(chartRef.value); } }); // 监听 data 变化触发重绘 watch(data, (newData) { if (chartInstance.value newData.length 0) { const option buildBarOption(newData, props.props); chartInstance.value.setOption(option, true); } }); // 销毁实例 onUnmounted(() { if (chartInstance.value) { chartInstance.value.dispose(); } }); /script4.2 查询参数动态注入从组件 props 到 Query DSL 的运行时拼接实际业务中组件常需传入动态参数如「当前选中的部门 ID」。useQueryResult支持传入params对象与 DSL 中的占位符匹配// 在组件中 const { data } useQueryResult(sales_by_dept, { deptId: selectedDept.value // 来自下拉框 v-model });后端QueryDefinition解析器会查找 DSL 中形如${deptId}的占位符并用params.deptId替换// QueryDefinitionParser.java public class QueryDefinitionParser { public static QueryDefinition resolvePlaceholders(QueryDefinition def, MapString, Object params) { String yamlStr YamlUtil.toJson(def); // 转为 JSON 字符串便于正则替换 for (Map.EntryString, Object entry : params.entrySet()) { yamlStr yamlStr.replaceAll(\\$\\{ entry.getKey() \\}, String.valueOf(entry.getValue())); } return JsonUtil.fromJson(yamlStr, QueryDefinition.class); } }这样一个组件即可复用多个查询定义只需改变传入的params无需为每个部门单独定义 query.yaml。4.3 缓存与刷新策略LRU Cache 与 WebSocket 实时通知的混合应用高频访问的大屏需平衡实时性与性能。本方案采用两级缓存层级机制适用场景TTLL1内存Caffeine Cache同一 queryId 的重复请求30 秒L2消息WebSocket 通知数据库变更时主动推送无后端在QueryExecutor执行前先查缓存命中则直接返回未命中则执行查询并写入缓存。同时监听 MySQL binlog通过 Debezium或 MongoDB change stream当orders表有 INSERT/UPDATE 时向 WebSocket 主题topic.query.sales_summary发送通知// WebSocketController.java MessageMapping(/query/refresh) public void handleRefresh(String queryId) { // 清除对应 queryId 的缓存 queryCache.invalidate(queryId); // 向所有订阅该 queryId 的客户端广播 simpMessagingTemplate.convertAndSend(/topic/query/ queryId, refresh); }前端 ECharts 组件建立 WebSocket 连接监听对应主题// 在 useQueryResult 中扩展 const socket new WebSocket(ws://localhost:8080/ws); socket.onmessage (event) { const msg JSON.parse(event.data); if (msg.topic query.${props.dataSource}) { refresh(); // 触发重新拉取 } };这样订单数据入库后 1 秒内大屏图表自动刷新无需轮询。5. 从开发到上线Nginx 部署 Vue3 SpringBoot 的典型配置与跨域调试技巧5.1 开发阶段Vue3 Vite 代理与 SpringBoot CORS 的协同配置本地开发时Vue3 项目Vite运行在http://localhost:5173SpringBoot 后端在http://localhost:8080。Vite 的vite.config.ts配置代理将/api/**请求转发至后端// vite.config.ts export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } });同时SpringBoot 必须显式允许前端域名跨域不能仅依赖CrossOrigin注解它只作用于 Controller 方法无法覆盖/actuator等路径Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:5173) // 明确指定禁用 * .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true) .maxAge(3600); } }注意allowedOrigins必须精确匹配前端地址http://localhost:5173与http://127.0.0.1:5173视为不同源。若使用 IP 访问需同时添加。5.2 生产部署Nginx 反向代理与静态资源分离的最佳实践生产环境推荐 Nginx 作为统一入口将/路径指向 Vue3 构建产物/api路径代理至 SpringBoot# /etc/nginx/conf.d/dashboard.conf upstream backend { server 127.0.0.1:8080; } server { listen 80; server_name dashboard.example.com; # Vue3 静态资源dist 目录 location / { root /var/www/dashboard-fe; try_files $uri $uri/ /index.html; } # API 请求代理 location /api/ { proxy_pass http://backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # WebSocket 支持用于实时刷新 location /ws { proxy_pass http://backend/ws; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; } }关键点try_files $uri $uri/ /index.html;确保 Vue Router 的 history 模式正常工作proxy_http_version 1.1和Upgrade头是 WebSocket 必需的。5.3 参数调优SpringBoot 内存与 Tomcat 连接数的合理设置大屏常并发加载多个图表每个图表一个/api/query请求需调整 SpringBoot 内置 Tomcat# application-prod.yml server: port: 8080 tomcat: max-connections: 200 # 最大连接数 max-threads: 100 # 工作线程数 accept-count: 100 # 连接等待队列长度 spring: datasource: hikari: maximum-pool-size: 30 # 数据库连接池上限 minimum-idle: 10 connection-timeout: 30000 redis: lettuce: pool: max-active: 50 max-idle: 20 min-idle: 10JVM 启动参数建议java -Xms512m -Xmx1024m -XX:UseG1GC -XX:MaxGCPauseMillis200 -jar dashboard-backend.jar对于 4C8G 服务器此配置可稳定支撑 50 并发图表请求。若出现Connection refused优先检查max-connections与maximum-pool-size是否匹配避免后端线程阻塞在数据库连接获取上。5.4 故障排查Chrome DevTools 中定位「查询慢」与「图表空白」的三步法当大屏出现加载缓慢或图表不显示按以下顺序排查Network 面板看/api/query请求查看Status是否为200Time是否超过 2s若状态码500点开 Response 查看后端异常堆栈如MongoQueryException若状态码200但rows为空数组检查query.yaml中filters时间范围是否错误如${TODAY-1D}写成${TODAY1D}Console 面板看 ECharts 报错常见Cannot initialize ECharts, dom is nullchartRef对应的 DOM 元素未挂载检查v-if条件或v-show误用Option is not validbuildBarOption()返回的配置对象结构错误用console.log(option)对比 ECharts 官方文档Application 面板看 LocalStorage检查canvas-schema是否损坏JSON 格式错误可手动清空后重新编辑查看query-cache若启用前端缓存是否过期强制刷新页面测试这三步覆盖 90% 的线上问题无需登录服务器即可快速定位。本文还有配套的精品资源点击获取