Skip to content

组件与画布

平台提供 57 类 组件,覆盖图表、地图、列表、媒体、基础元素与 课堂评价(16 类)。从左侧 组件 Tab 拖拽到画布即可添加。

完整列表与选型建议见 组件类型速查每类组件的用法与配置项组件配置说明

组件面板
分类列表、收藏与最近使用

组件分类

类别数量示例
基础19文本、标题、图片、视频、音频、数字滚动、形状、按钮、菜单、表格、iframe、内容块…
图表17柱状、折线、饼图、雷达、漏斗、桑基、K 线、仪表盘、折柱混合…
地图4渐变地图、飞线地图、3D 地图、3D 飞线
其它1词云
课堂评价16头图、倒计时、颁奖台、聚光灯、排行榜、进度、动态、雷达、扫码、评委展示…

具体列表以左侧组件面板为准;你的账号可能因 组件权限 只能看到部分类型。


属性面板结构

选中单个组件后,右侧属性区自上而下一般为:

  1. 组件标题 与类型
  2. 占用提示(他人正在编辑此组件时)
  3. 布局条:X、Y、宽、高、层级
  4. 属性搜索钉选常用项(未手动钉选时按组件类型展示默认常用项)
  5. 主题预设条(部分图表)
  6. 内容 / 样式 / 数据 / 行为 / 高级 分段
  7. 底栏:锁定、复制组件、删除

分段说明(v2.3.0)

分段典型内容
内容文案、图表元素开关、列配置等
样式颜色/渐变/透明度、字号、提示框样式悬停阴影
数据静态数据、数据源绑定、数值格式、数据标签单位
行为交互事件、动效与交互(入场、科技外壳、列表滚动、地图轮播/飞线等)
高级图例精细、dataZoom、大数据渲染等(以面板为准)

多数板块标题已统一(如「显示设置」「颜色与填充」),长列表默认 可折叠;搜索命中后会 自动展开 目标板块。

属性搜索与钉选

  • 搜索:支持中文、同义词(字号/字体大小)、拼音首字母;命中后自动 切换 Tab、展开折叠块并 脉冲高亮 表单项
  • 钉选:在表单项旁钉选后,出现在顶部 常用 条;未手动钉选时按组件类型展示 默认常用项

完整说明见 属性面板详解

多选

框选多个同类型组件时,可批量修改部分 公共样式 属性。


数据相关

方式适用
静态数据在「数据」段直接编辑 JSON 或表格
数据源绑定选 HTTP / WebSocket 数据源 + 路径 + 列映射
填入示例数据一键替换为内置示例(26 类),见 配色与示例数据

已绑定数据源时,填示例数据只改静态展示,绑定关系仍在;预览以绑定数据为准。


图层 Tab

图层 面板提供:

  • 当前页组件 列表 / 树形 视图
  • 点击条目与画布 同步选中
  • 锁定 防误拖;调整 层级(置顶、置底等)

复杂页面建议:先锁定背景大图,再编前景组件。


素材 Tab

图片素材库浏览 权限时:

  • 按分类浏览管理员维护的公共图片
  • 拖拽 到画布生成图片组件,或复制链接到图片地址

预设、收藏与最近

收藏 / 最近(组件 Tab 顶部)

  • 点击组件旁 星标 加入收藏
  • 最近 自动记录最近拖入的类型
  • 快捷 chip 可再次拖入画布

我的预设(预设 Tab)

  1. 选中配置好的组件
  2. 属性区 保存为预设(或右键相关入口)
  3. 命名、选择 个人团队 范围
  4. 预设 Tab 拖拽到画布

适合固定 KPI 卡片、统一标题样式等跨项目复用。


样式复制

右键或底栏:

  • 复制样式:只复制样式相关属性
  • 粘贴样式:应用到当前选中组件(需先复制过)

比复制整个组件更轻量,适合统一系列图表配色。


画布技巧

技巧说明
网格 + 吸附对齐更整齐
适应窗口总览整页布局
锁定背景避免误选大图
多页面按主题或场景分页,用菜单/按钮切换

交互与动画

入场动画与科技外壳

行为 段配置:

  • 入场动画:fade、slide、zoom 等;时长 100~2000ms;错落延迟 0~5000ms(多组件依次出现)
  • 科技外壳:霓虹呼吸、线框流光、定时扫光(全部 57 类 可用)
  • 图表轮播 / 列表滚动 / 数字卷轴 / 地图飞线与轮播 / 关系图流光 / 词云漂浮:见 组件动画与外壳

V2.3.0 起:编辑器画布与预览/发布页 一致播放 入场与外壳;错落延迟时图表 延迟挂载,与整页「图表加载动画」不冲突。

点击事件

类型效果
不响应
跳转页面切到其他大屏页
弹出页面弹层展示指定页
外链打开 URL
事件链JSON 配置多步动作

事件链 可组合:setVariableswitchPageopenModalopenLinkrefreshDataSource 等。配置步骤、模板与 JSON 示例见 菜单与事件链

内容块(contentBlock)

可嵌入 本系统内其他大屏的预览页(登录态),用于大屏套大屏、分区复用。配置目标大屏 ID 与展示区域即可。


相关文档

巧曦大屏搭建平台 · 技术支持