AI如何制作数据大屏,赶紧来尝个鲜!
作者：微信文章本播客由AI工具扣子空间（coze.cn）一键生成欢迎搜索尝试一键生成你的播客！
经常有人问我，AI如何制作数据大屏，今天便从零开始，给大家演示这个工作流程。目前数据可视化最强的AI是Claude，登录后，选择Claude 3.7 Sonnet模型，勾选Extended thinking功能。
https://mmbiz.qpic.cn/sz_mmbiz_png/RMAmEXcaKPkszMgViclbu06mXdDyIkLDKNY0dbYvejJgzpRrbs5cibQmagkNpQiaIjjtuRMLf7y160PstM8EzCL7w/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1
直接输入：我是负责监督美国关税的数据分析师，想制作一个数据大屏，能够监控美国关税对全球经济的影响，请你帮我设计一下，并提供完整的html代码简要说明想做什么，希望AI怎么回复，不要一上来就搞什么专业的提示词，我们只要学会跟AI交流，循序渐进，照样可以达到目的。
https://mmbiz.qpic.cn/sz_mmbiz_png/RMAmEXcaKPkszMgViclbu06mXdDyIkLDK2DUGlgf4qznoHGAziaWBnVia9qzBZTy9Qv6RF6dFFSVyo4rwpiaFQyLNg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1
AI就会按我们的要求，提供对应数据大屏的代码
待代码输出完成，它还会给出这个数据大屏的功能介绍、设计特点、实现技术，都不懂没关系，看看就好。
https://mmbiz.qpic.cn/sz_mmbiz_jpg/RMAmEXcaKPkszMgViclbu06mXdDyIkLDK13TYgQUEgeUOdicRdOsrtib3D6PqUgapII6iboaIU40fUY3QnCwiaAjQ0Q/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1
我们打开它提供的数据大屏，试用一下，看看有没哪里不满意的，改进它。比如这里发现右侧的柱状图显示不完整，中间有些中文字不知道什么意思，好像被遮挡了。
直接把这个问题丢给AI，并附上截图。
完了之后，它会告诉我们修复了哪些问题，我们要做的就是再次打开AI提供的数据看板，验证是否真的解决以及是否有新的问题出现。
https://mmbiz.qpic.cn/sz_mmbiz_png/RMAmEXcaKPkszMgViclbu06mXdDyIkLDKVK1VnCteBvmHSeZsOjw4oewnEUZnK1lbFMxYcRFlcaUNPN1Q7XaiatQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1
可以看到它修复了中间隐藏的那几个图表，同时我们又发现，看板无法往下移动，看不到下方的图表
https://mmbiz.qpic.cn/sz_mmbiz_png/RMAmEXcaKPkszMgViclbu06mXdDyIkLDK1G9LxyHdD5NFrvykUNr7ibuicrrynoVIic92tq2VHckho9d9Vf2x56H7A/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1
那就再次把问题丢给AI，千万记住，我们是老板，AI才是打工人，有问题一定要交给AI解决！
再次打开验证，确认AI是否已把上述提到问题解决，并查看是否还有要进一步优化的地方。如此往复，直到最终得到我们想要的结果。
至此，我们已经做好了数据大屏，假如后续还要制作类似的数据大屏，也要像这样反复试错吗？教大家一个方法，让AI输出对应的提示词模板，快速积累过往跟AI交流的成果！
https://mmbiz.qpic.cn/sz_mmbiz_jpg/RMAmEXcaKPkszMgViclbu06mXdDyIkLDK8nG3gykIcQria8UWsr9BBf7Yjoq98QpsBYMicVvPrEicpZpGYpauRWOsA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1
下一次再有类似需求时，把提示词模板发给AI
https://mmbiz.qpic.cn/sz_mmbiz_png/RMAmEXcaKPkszMgViclbu06mXdDyIkLDKCJ4qUOMUv0oBl8kCeU8xCNH1pF3X2f2FbgjmVlNlehyB44ibFmfltCQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1
一次到位，效果惊艳，屡试不爽！
下面是此次交流获得的数据大屏通用模板，拿来即用！通用提示词模板：我是[职位/角色]，需要制作一个关于[主题]的数据大屏，用于[目的/用途]。请帮我设计并提供完整的HTML代码，要求如下：
1. 技术要求： - 使用纯HTML/CSS/JavaScript实现，不依赖后端 - 使用ECharts库进行数据可视化 - 确保页面响应式设计，适配不同屏幕尺寸 - [其他特定技术要求]
2. 视觉设计： - 整体色调为[颜色方案] - 模块包括：[列出主要模块/区域] - 布局采用网格系统，合理分配各区域比例
3. 数据内容： - KPI指标区域展示[列出关键指标] - 图表类型包括：[列出需要的图表类型，如折线图、柱状图、饼图等] - 数据维度包括：[时间维度/地域维度/类别维度等]
4. 交互要求： - 添加实时时钟功能 - 底部滚动新闻/数据栏 - 图表hover效果显示详细数据 - [其他交互需求]
最终成品应确保视觉美观、数据清晰、加载流畅，并能完整展示[主题]的关键数据和趋势。指标和趋势。生产监控数据大屏案例我是工厂生产主管，需要制作一个生产线监控数据大屏，用于实时监控生产状态和效率。请帮我设计并提供完整的HTML代码，要求如下：
1. 技术要求： - 使用HTML/CSS/JavaScript实现，ECharts用于数据可视化 - 实现仪表盘和进度条样式的图表 - 采用Grid布局确保各模块比例协调 - 使用CSS变量方便未来主题切换
2. 视觉设计： - 整体色调为深色背景，使用红黄绿三色指示不同状态 - 模块包括：生产线状态指示、产量统计、设备运行状态、良品率图表、能耗监控、预警信息 - 关键异常数据需高亮显示并闪烁提醒
3. 数据内容： - KPI指标：生产完成率、设备利用率、良品率、能耗指数 - 图表类型：生产线状态(进度条)、产量统计(柱状图)、设备运行(仪表盘)、良品率(折线图)、能耗(面积图) - 数据维度：时间(小时/班次/日)、生产线编号、产品型号、异常类型
4. 交互要求： - 生产线切换选择器 - 异常信息实时推送并高亮显示 - 图表支持放大查看详情 - 底部滚动显示系统通知和预警信息
最终成品应确保视觉直观、数据实时、关键异常醒目，让管理人员能够即时发现生产问题并快速响应。以上两个看板的体验网址：
https://www.xiaoyi666.top/
https://mmbiz.qpic.cn/sz_mmbiz_png/RMAmEXcaKPkszMgViclbu06mXdDyIkLDKtqDqjMx3Xb63yDkspCV3oCnXrG8YuHOTzWSQHq8GiasLKqMdtE5Tx3Q/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1
以上，学会了吗？
我最常用的两个AI工具分享：重大发现，国内可以充值ChatGPT会员账号了！揭秘低价Claude Pro会员陷阱：如何安全稳定使用正版账号？
页:
[1]