第1章 系统概述与登录1.1 系统功能模块本平台提供数据可视化大屏的设计、预览、发布能力主要模块包括大屏管理、模板管理、数据源、数据集、Excel 报表、数据字典、文件管理、用户管理。模块路径作用大屏管理/screens创建、编辑、发布可视化大屏模板管理/templates管理可复用的大屏模板数据源/datasources配置 SQL 数据库或 HTTP 接口连接数据集/datasets定义查询逻辑与查询参数、字段格式Excel 报表/excel表格类报表设计与发布数据字典/dicts下拉筛选等控件的选项数据设计器/designer/:id拖拽式大屏编排与联动配置1.2 登录系统1. 打开浏览器访问系统地址本地开发默认为 http://localhost:8080。2. 若未登录自动跳转至登录页输入用户名和密码。3. 点击「登录」进入管理后台默认进入「大屏管理」页面。图1-1系统登录页1.3 大屏列表1. 点击左侧菜单「大屏管理」进入列表页。2. 可执行新建大屏、编辑、预览、发布、分享、删除等操作。3. 点击「设计」或「编辑」进入大屏设计器。图1-2大屏管理列表第2章 数据源与数据集管理2.1 数据源管理1. 进入「数据源管理」点击「新增数据源」。2. 选择类型SQLMySQL/SQL Server 等或 HTTP。3. 填写连接信息主机、端口、库名、账号密码等保存后可用于数据集绑定。图2-1数据源管理2.2 数据集管理1. 进入「数据集管理」点击「新增数据集」。2. 填写名称、选择类型 SQL 或 HTTP。3. SQL 类型选择数据源编写查询语句HTTP 类型配置 URL、Method、Body。4. 配置「查询参数」「字段格式」「数据转换」后保存。5. 点击「预览」可在不绑定大屏的情况下验证数据与格式。图2-2数据集列表图2-3新增/编辑数据集对话框第3章 查询参数配置核心查询参数是连接「筛选控件↔数据集↔图表/表格」的纽带。参数名在全链路中必须保持一致。3.1 参数占位符语法位置写法示例SQL 语句${paramName} 或 #{paramName}WHERE region${region}HTTP URL${paramName}https://api.example.com/data?date${date}HTTP Body${paramName}{dept:${dept}}大屏全局参数与筛选组件 paramName 一致region、startDate 等3.2 数据集「查询参数」JSON 配置在数据集编辑对话框的「查询参数」文本框中填写 JSON 数组用于声明参数元数据[{name:region,label:区域,default:华东},{name:startDate,label:开始日期,default:2026-01-01}]1. name参数名必须与 SQL/HTTP 中 ${name} 占位符一致。2. label中文说明在设计器属性面板中提示设计人员。3. default默认值大屏未传参时使用该默认值执行预览/查询。4. 保存数据集后设计器绑定该数据集时会在「数据」标签页显示参数列表。说明SQL与HTTP类型数据集均支持查询参数JSON。HTTP数据集会在执行时将default与全局参数合并后替换URL/Body中的占位符。3.3 字段格式可选同一对话框中的「字段格式」可配置日期格式、小数位数、计算字段加减乘除大屏图表与数据集预览会自动继承并格式化显示。第4章 数据字典1. 进入「数据字典」新增字典及字典项编码、标签、值。2. 在大屏设计器中添加「下拉筛选」组件在属性中填写 dictCode 与 paramName即可从字典加载选项。3. 用户选择后paramName 对应的值写入全局查询参数。图4-1数据字典管理第5章 大屏设计器5.1 设计器界面布局区域说明左侧组件面板基础/筛选/图表/地图/三维/装饰组件点击或拖拽添加到画布中间画布1920×1080 设计区域支持缩放、对齐、分布、图层右侧选项卡属性组件配置、画布页面与默认参数、联动/传参顶部工具栏撤销重做、缩放、预览、保存、发布、联动调试开关图5-1大屏设计器总览5.2 添加与配置组件1. 在左侧选择分类如「查询筛选」点击「下拉筛选」「日期筛选」「树形面板」等。2. 选中画布上的组件在右侧「属性 → 定制」中配置标签、参数名等。3. 在「属性 → 数据」中绑定数据集配置字段映射X/Y/名称/值字段。4. 在「属性 → 样式」中配置容器样式图表类组件可配置可视化样式与样式代码。图5-2筛选组件属性配置参数名paramName第6章 查询参数与联动重点6.1 筛选组件与参数名每种筛选控件的 paramName 即写入全局参数的键名组件paramName作用特殊说明下拉筛选 selectFilter选中项的值可绑定 dictCode 或选项数据集输入筛选 inputFilter输入文本可设「变更联动」即时/按钮触发日期筛选 dateFilter单个日期值支持年/月/日/周精度日期范围 dateRangeFilterstartParam、endParam 两个参数默认 startDate、endDate树形下拉/树形面板选中节点 value多选时为逗号分隔查询按钮 queryButton不直接产生参数绑定多个筛选组件后统一触发查询6.2 画布「默认参数」1. 在设计器右侧切换到「画布」选项卡找到「页面参数 → 默认参数」。2. 可填写简单 JSON 对象{region:华东,startDate:2026-01-01}3. 或数组形式带 label[{name:region,default:华东,label:区域}]4. 预览、联动调试时以默认参数为初始值URL 中同名参数会覆盖默认值。5. 开启「URL 同步」后预览页会把当前参数写入地址栏便于分享带参链接。图6-1画布默认参数与URL同步6.3 联动/传参面板1. 右侧切换到「联动/传参」查看当前大屏所有参数名、传参检查、联动关系。2. 「参数模拟器」可手动输入参数值点击「应用参数」测试图表刷新。3. 为图表启用联动选择目标图表配置点击/查询事件的目标组件与参数映射。4. 「传参检查」会列出各组件所需参数与当前是否已配置筛选来源。图6-2联动/传参面板6.4 联动调试模式1. 打开顶部工具栏「联动调试」开关。2. 画布上方出现参数调试栏可实时修改参数并刷新数据组件。3. 用于设计阶段验证 SQL/HTTP 占位符与筛选控件是否正确传参。4. 调试完成后关闭开关保存大屏。图6-3联动调试与参数栏6.5 完整传参流程示例目标按区域、日期范围查询销售柱状图。1. 数据集 SQLSELECT name, value FROM sales WHERE region${region} AND dt${startDate} AND dt${endDate}2. 数据集查询参数 JSON[{name:region,label:区域,default:},{name:startDate,label:开始,default:},{name:endDate,label:结束,default:}]3. 大屏添加下拉筛选 paramNameregion日期范围 startParamstartDate, endParamendDate查询按钮绑定上述筛选柱状图绑定该数据集。4. 柱状图 interaction.query 目标设为自身或关联表格启用查询联动。5. 画布默认参数可设{region:华东,startDate:2026-01-01,endDate:2026-01-31}6. 预览修改筛选 → 点击查询或即时联动→ 图表按新参数请求数据。6.6 预览页 URL 传参预览地址示例http://localhost:8080/preview/1?region华南startDate2026-02-01endDate2026-02-28说明分享页/share/:code同样支持URL参数shareCode除外。参数会合并画布defaultParams后传给所有数据集请求。第7章 图表样式与预览发布7.1 图表可视化样式1. 选中图表组件右侧「属性 → 样式」配置容器透明度、圆角等。2. 图表样式面板分「可视化」与「样式代码」两个子页。3. 可视化可配置标题、图例、坐标轴、Tooltip、配色、柱线样式、动画等。4. 「样式代码」可编写 ECharts option JSON 片段与可视化样式深度合并用于复杂效果。图7-1图表样式与样式代码7.2 预览与发布1. 点击工具栏「预览」在新标签页查看真实比例效果。2. 确认数据、联动、参数无误后返回设计器点击「保存」。3. 点击「发布」使大屏对外可见可在列表配置分享码、访问密码。图7-2大屏预览页第8章 Excel 报表1. 进入「Excel 报表」新建报表并进入 Excel 设计器。2. 绑定数据集在侧边栏配置查询条件参数名与数据集占位符一致。3. 设计单元格绑定与表头预览/发布报表。4. 查询条件支持日期精度年/月/日/周配置。