痛点

做组态大屏，本应是展示数据的艺术，却成了工程师的体力活。

UI设计、拖拽图元、调整布局、配置Echarts样式、逐个绑定数据、再一个个设置交互状态……每一步都是那么重：

● 没UI图纸？只能对着空白画布发呆

● 不懂Echarts配置？查文档查到怀疑人生

● 数据绑定只能手动挨个来，重复操作到麻木

● 图元交互逻辑复杂，配完状态列表已经精疲力尽

● 换个主题色？逐个调整图元

我们一直思考，如何让组态大屏制作像说话一样简单：只需描述，就能实现——

● 根据我的数据和素材，生成一个双飞翼布局的大屏

● 把这个图表美化一下，要有科技感

● 生成20个文字图元，自动绑定我的数据点位

● 主题换成粉色系

● 温度大于10度变红色，小于10度变蓝色

不需要拖拽，不需要写配置，不需要逐个设置

现在，这一切已成为现实。乐吾乐大屏可视化AI助手，正式上线。

你说，它做。从"想法"到"可视化大屏"，自动理解需求，智能生成专业级可视化大屏，只需数秒。

描述即生成，所想即所得

应用场景

2.1. 大屏项目生成 - 一键生成项目

2.2. 主题切换 - 一键换肤

2.3. 新增图元 - 要什么有什么

注：当前仅支持基本图元和echarts的生成，控件图元在逐步完善中，尽情期待

2.4. 图元美化 - 不再为样式发愁

小技巧： 若你只有一张UI图，你无法较好的描述美化需求，你可以借助其他图形理解AI帮你生成提示词,，例如这里使用千问AI生成提示词：

然后将提示词复制到AI助手帮助你生成这个echarts：

最终效果和UI图片类似

2.5. 数据绑定 - 一句话实现数据可视化

2.6. 修改属性 - 想啥样就啥样

2.7. 生成任意的svg图元 - svg提供无限可能

注：实际生成效果与AI模型有关，此处仅介绍这是一种应用方向

2.8. 模板生成 - 布局没头绪？AI给你答案

2.9. AI辅助布局 - 一句话改变图元排版

2.10. 状态交互 - 一句话实现图元交互

注意：你需要明确告知AI助手触发器设置在哪个图元上（判断谁的属性就设置在谁上），否则AI可能会设置错误，目前仅实现了“更改属性”这一操作，其他操作项后续将逐步完善

2.11. 批量删除图元 - 删除图元不再挨个挑选

2.12. 其他能力 - 等你来探索

...

使用方法

3.1. 图元操作

为了让AI更准确的理解用户意图，当前版本，你需要先手动框选你需要操作的图元，AI会自动读取到相关图元并为之执行操作。

3.2. AI面板介绍

在大屏可视化顶部菜单栏的 "AI助手" 点击即可进入AI助手面板

在面板的输入框中，各个图标的功能介绍如下

下面详细介绍各个图标的功能

模型列表

由于不同模型的理解能力和实际生成效果各不相同，我们提供了多个大模型供用户选择，这些大模型是经过我们实际测试，从性能、生成效果等各方面综合判断下来认为比较优异的大语言模型，我们后续会继续探索更多的模型，可能我们提供的选项后续会发生改变，但是这些不会影响用户的实际使用，仅提供选择参考

素材

用户可以通过此面板将自己的相关素材提交给AI助手，让AI助手使用你的素材生成大屏可视化项目

素材配置页有个开关按钮，当用户将此开关打开后才会把相关素材提交给AI，建议非必要不要打开此按钮，仅在需要使用素材的时候才打开

由于目前的版本，AI无法通过图像识别来判断每个元素的作用和意义，需要用户提供以下信息供AI参考：

• 素材名：素材的名字，例如：蓝色渐变色大标题底图、图标数据背板、装饰按钮...需要用言简意赅的名字来概括此素材

• 描述：关于此素材的详细描述，用于描述此素材的实际功能、主图颜色、意义、尺寸、以及你希望让AI知道的其他信息，用于AI参考，此配置项十分重要，AI会根据你提供的描述最终决定该如何使用此素材，直接影响最终的生成效果！

• 图片地址：素材的url地址，当前版本需要自己在左侧“我的资源”面板中上传相关素材，然后再将素材的url地址复制到此输入框中，下方会出现素材的预览图。

数据点

此选项用于将当前用户的数据点列表同步给AI助手，用于辅助用户实现数据绑定，这在帮助用户进行批量绑定数据点的场景十分有用！点击数据点按钮，按钮高亮为蓝色则表达此功能打开，再次点击则关闭此功能。

模型记忆

需要声明的是在当前版本，我们暂未开启模型记忆的功能，也就是说大模型不会记住当前的上下文信息，每发送一条指令都是在新生成会话信息，之所以做这样的决定，是因为当开启模型记忆后，当用户选择和生成的图元过多，上下文信息很复杂的情况下，大模型的“幻觉”现象会比较严重，会很容易对用户的指令造成歧义，并且他会导致token成本不断增加，生成效果不如不开启记忆，所以我们暂且关闭了此功能，若后续我们探索出更适合我们大屏场景的记忆方案后再推出，感谢您的理解。

虽然模型记忆功能是关闭的，但是我们提供了消息列表清除功能，让用户可以方便的清除当前会话列表的记录信息。点击后即可将当前会话记录清空（此记录并不会被当成上下文传递给AI助手）

对于此面板的基本介绍就是这么多，后续我们增加其他功能后会再次补充此文档，接下来，让我们实际体验下AI助手带来的极致编辑体验！

注 AI助手的实际效果与大模型推理能力和提示词有关，由于AI的概率性，哪怕是同样的模型和提示词一般会有不同的效果，若生成结果你不满意，你可以多次尝试

实际案例

在应用场景一节，我们大致演示了AI助手在各个方面的应用示例，接下来我会使用AI助手来帮助我从0开始实现一个完整的项目，让我们一起来感受一下这颠覆式的应用效果

4.1. 使用素材快速生成可视化项目

素材配置

首先我们需要向AI助手提供此项目需要用到的素材信息，这里我仅提供4个素材作为示例，相关配置内容见下图

注意此处的素材描述要做到言简意赅，各个元素的功能应当描述准确

数据源配置

在实际项目中，我们需要配置数据源供界面展示，在这里作为示例我使用官方提供的模拟数据源，然后点击AI面板的 数据源 按钮，将数据源信息同步给AI助手

向AI助手描述需求

在素材和数据源都准备好后，我们开始编写提示词让AI帮我们实现需求：

提示词：“根据我提供的素材和数据点位实现一个双飞翼布局的大屏可视化项目，中间位置预留，必须为对应的图元和ecahrts图表绑定相关数据点，两侧的数据面板应当有3个子数据面板，每个子数据面板应当有合适的二级标题和图表底图，所有图元线宽为0，要求有层次感，科技感”

然后你将得到：

是的，你没看错，仅通过一句话，你不用做任何操作，AI助手就帮你实现了素材布局、图表设计、数据绑定等等一系列操作，并且他生成的项目布局准确美观，色彩搭配和谐，他还结合你提供的数据点信息，自动推算出当前的项目名称

格式微调

虽然AI助手已经帮你做了百分九十的工作，但是剩下的百分之十还需要我们继续让AI修改，在这个示例中有个小问题，AI并未使用我提供的“小标题素材”需要我让他稍作修改：首先先用鼠标 框选 这四个错误的小标题，然后输入提示词： “把这几个图元的背景图设置为我提供的小标题素材 ”

然后AI会自动帮我们设置素材，我们再稍微调整文字的位置样式，中间再插入一个iframe控件，加载实际项目的组态运行图即可，这里我使用官网提供的项目案例，就这样一个大屏可视化的项目就基本完成

其实我们不太推荐这种希望AI“一口气吃掉一个大胖子”的做法，因为这会带来一定的不可控性，我们更加推荐你将项目步骤进行拆解，分成多个小步骤让AI执行，这样你能及时发现问题，并对每一步进行一个可控的操作。

最佳实践

5.1. 任务拆解：小步快跑，逐次迭代

不要： 一次性让AI完成"生成整个大屏+绑定所有数据+设置所有交互"要： 复杂任务拆成单个小任务，每步验证后再下一步

示例流程：先生成布局框架 → 2. 调整配色主题 → 3. 逐个区域绑定数据 → 4. 最后配置交互为什么： AI上下文有限，任务越单一，理解越精准，出错率越低。

5.2. 控制批量：少即是多

不要： 一次性框选几十个图元让AI批量操作要： 单次操作控制在5-10个图元以内为什么： 数据量过大会触发接口限制或导致AI"注意力分散"，生成结果不稳定。

5.3. 描述精准：给AI清晰的"指令集"

模糊描述	精准描述
"美化一下这个图表"	"将这个Echarts柱状图改为深色科技风，柱体用渐变蓝色，圆角半径4px，添加数据标签"
"绑定数据"	"将标题文字绑定到'设备总数'数据点位，实时更新"
"改个好看的颜色"	"主题色改为#1E90FF科技蓝，辅助色用#00CED1青绿，背景用深色系"

公式： 目标对象 + 具体动作 + 预期效果 +（可选）参考标准

5.4. 明确操作目标

在让AI帮你做图元之间的状态交互的时候，你应该明确告知此操作的目标是哪个，例如：你希望A图元的文字大于10时，让B图元的背景色变红，你应该明确告知AI，要在 A身上设置触发器，否则AI可能会错误的在B图元上设置触发器而达不到你想要的结果

5.5. 多次尝试

• 大模型是概率生成，相同提示词每次结果可能不同
• "幻觉"和"创意"是一体两面

建议做法：

• 结果不满意？重试1-2次再调整提示词
• 记录效果好的提示词，形成个人模板库

最佳实践总结表

场景	记住这句
任务太大	拆小步，一步步来
选太多图元	少框点，分批搞
描述太虚	给细节，要具体
交互错乱	谁判断，触发器设谁身上
结果不对	再试一次，记录好词

下一步计划

AI助手为大屏可视化的编辑提供一种全新的人机交互的形式，我们在不断思考和探索怎样才能最大化的利用AI大模型的优势帮助用户快速实现科学、现代、美观的可视化界面，在接下来我们将在已有的能力上作以下的更新计划：

● 完善控件图元支持

● 完善平台基础能力支持（动画、状态交互、组合、连线）

● 将用户的素材资源直接软链接到AI的素材列表

● 实现图片生成，让用户通过描述即可生成想要的素材并可直接在编辑器中使用

● 接入多模态模型，让用户提供图片，即可生成与用户图片类似的图元或场景

● 增加联网搜索，让用户实时获取世界的最新数据

● 搭建企业知识库，让用户遇到问题直接问AI，不再四处翻阅文档

---

未来已来，大屏制作，进入AI时代

在线使用：https://v.le5le.com/

Github：https://github.com/le5le-com/meta2d.js

Gitee: https://gitee.com/le5le/meta2d.js

解决方案

https://le5le.com/enterprise/solution

暖通可视化（2.5D大屏）

废水处理系统（2.5D大屏）

中央空调系统（2.5D大屏）

智慧楼宇管理系统（2.5D大屏）

光伏系统（2.5D/2D工程大屏）

废气处理（2D大屏）

变电站一次系统接线图（2D大屏）

储能电站储能线分图（2D大屏）

火电厂生成过程示意图（2D大屏）

暖通（2D大屏）

机房可视化运维平台（3D大屏）

暖通可视化系统（3D大屏）

储能电站智慧园区（3D工程大屏）

石油化工厂（3D大屏）

风电场升压站（3D大屏）

国产开源  自主可控  持续迭代