Skip to content

大屏组件介绍

Forge Report 提供多种可视化组件,满足不同场景的数据展示需求。

组件分类

分类组件说明
图表柱状图、折线图、饼图、面积图数据可视化展示
文本标题文本、滚动文本、数字面板文字信息展示
媒体图片、视频多媒体内容展示
地图中国地图、散点地图地理数据展示
装饰边框、装饰线、背景大屏美化

图表组件

柱状图

配置项说明示例
X 轴字段分类维度category
Y 轴字段数值维度value
柱体颜色柱子颜色#5470c6
是否堆叠多系列堆叠

折线图

配置项说明示例
X 轴字段时间维度date
Y 轴字段数值维度value
线条样式实线/虚线实线
平滑曲线是否平滑
面积填充是否填充面积

饼图

配置项说明示例
分类字段名称维度name
数值字段占比数值value
内圈半径环形图内圈占比0.5
标签显示是否显示标签

文本组件

数字面板

展示单个关键指标,支持数字动画效果:

配置项说明
数值字段数据源中的数值字段
前缀/后缀如 ¥、%
千分位是否显示千分位分隔符
数字动画数值变化时的过渡动画
字体样式字号、颜色、粗细

标题文本

配置项说明
文本内容支持动态变量
字体样式字号、颜色、对齐方式
背景设置背景色或背景图

图片组件

配置项说明
图片来源静态 URL 或文件上传
适配方式填充、适应、拉伸
圆角图片圆角半径
边框边框样式和颜色

地图组件

中国地图

配置项说明
数据字段省份名称字段
数值字段各省数值
视觉映射颜色渐变范围
是否散点叠加散点标记

地图组件使用标准中国行政区划数据,省份名称需与标准名称一致。

通用属性

所有组件共享以下通用属性:

属性说明
位置X、Y 坐标
大小宽度、高度
旋转旋转角度
透明度0-100
层级组件叠放顺序
显示条件根据数据动态控制显隐

下一步

Forge Admin — 基于 Vue3 + Spring Boot 的企业级后台管理框架