AI开发HTML实战系列第76期 | 如何利用HTML设计数据仪表盘
今天是周六，杭州的天气非常好。这也让我一大早有了很好的心情。
今天我想给大家分享的是如何用HTML设计仪表盘。实际上仪表盘的使用场景是非常多的，在很多地方也成为数据大屏，包括一些企业喜欢搞个大屏幕投出来。
那我准备给大家分享的就是如何用HTML输出某公司的投资分析数据。
本次案例：以中芯国际为例，用一段提示词生成一个涵盖财务健康、技术面分析、竞争对手比较、SWOT战略估值的360度投资分析仪表盘。
前面五期我们做了21种图表，每一种都是”单图”——一张图回答一个问题。但现实中的数据展示场景往往不是这样的：你去任何一个企业的数据中心、指挥大厅、投资分析室，看到的都是一整面墙的”大屏”——上面密密麻麻排着各种图表、数字、指标。这就是仪表盘。
普通图表：一张图，回答一个问题（比如”Q1营收多少”）仪表盘：多张图 + 多个指标 + 多种可视化形式组合在一起，回答一组关联问题（比如”这家公司值不值得投资”）简单说，仪表盘就是”把多个图表拼在一起，形成一个完整的数据故事”。但这个”拼”不是简单地把几张图塞到一个页面上——要有布局逻辑、有信息层次、有视觉统一性。否则就是”图表大杂烩”，不是仪表盘。
• 企业数据中心：服务器状态、流量监控、告警信息• 投资分析室：股票走势、财务指标、行业对比• 生产车间：产能数据、良品率、设备状态• 运营部门：用户增长、转化漏斗、收入趋势• 项目管理：进度看板、资源分配、风险预警你会发现，这些场景有一个共同点：都需要”一眼看到全局，细节按需下钻”。这就是仪表盘的核心价值。
在写提示词之前，我先想清楚”一个完整的投资分析仪表盘应该包含什么”。我不是金融专业出身，但作为普通投资者，我知道看一家公司至少要看这几个维度：
公司赚不赚钱？营收增长怎么样？利润率多少？负债率高不高？这些是最基础的”体检指标”。对应到图表就是：营收利润趋势折线图、资产负债率仪表盘、现金流瀑布图等。
股价走势、成交量变化、市盈率/市净率在行业中的位置、分析师评级分布。这些反映的是”市场怎么看待这家公司”。对应K线图、成交量柱状图、PE/PB对比条形图等。
中芯国际不是孤立存在的，要放在行业里看。和台积电、联电、华虹比，营收规模差多少？毛利率谁高谁低？研发投入比例如何？雷达图或分组柱状图是最合适的表达方式。
优势、劣势、机会、威胁——SWOT四象限图。再加上DCF估值模型的敏感性分析，给出一个”合理估值区间”。这部分是”结论区”，前面的所有分析都在为这一步铺垫。
上面四个维度理清楚之后，提示词其实很好写——就是把维度翻译成AI能理解的需求描述。但有一个关键点：仪表盘的提示词不能太具体，不能规定”左边放什么图、右边放什么图”，因为布局应该由AI根据内容自动优化。你要做的是规定”内容范围”，而不是”排版细节”。
创建一个网页仪表盘，对中芯国际进行 360 度全方位的可视化分析。内容必须涵盖财务健康状况、技术面/市场情绪、竞争对手比较以及战略估值(SWOT/内在价值)，以提供明确的投资建议。
• “360度全方位”——这个词告诉AI”不要只画一两个图表，要全面覆盖”。如果不加这个限定，AI可能只给你画个营收趋势图就完事了• “必须涵盖”四个维度——明确了内容范围，但不规定每个维度用什么图表。让AI自己选择最合适的可视化形式，比你手动指定效果更好• “以提供明确的投资建议”——这是终极目标。告诉AI”所有分析都要服务于一个结论”，这样生成的仪表盘会有一个”结论区”，而不是一堆散乱的图表• 提示词很短，但足够了——仪表盘类提示词不需要像单图那样写很详细的样式约束，因为仪表盘本身就是”复合体”，AI会根据内容自动选择合适的配色和布局
• 顶部：公司名称、当前股价、涨跌幅等核心指标卡片，一眼获取关键数字• 左侧区域：财务健康模块——营收利润趋势图、关键财务比率仪表盘、现金流分析• 中间区域：技术面分析——股价走势K线图、成交量、PE/PB估值水位图• 右侧区域：竞争对手比较——多维度雷达图、营收规模对比柱状图• 底部区域：SWOT四象限分析 + 内在价值区间 + 最终投资建议• 整体：深色主题，金色/翠绿强调色，图表间有统一的配色和间距
投资分析仪表盘只是一个例子。真正有价值的是：你只需要把提示词里的”分析对象”和”分析维度”换一下，就能生成任何场景的仪表盘。
“创建一个网页仪表盘，对XX项目进行全方位可视化监控。内容必须涵盖进度概览、资源分配、风险预警、里程碑达成情况，以提供明确的项目健康度评估。”
“创建一个网页仪表盘，对XX电商店铺进行全方位可视化分析。内容必须涵盖流量来源、转化漏斗、商品销量排行、用户复购率，以提供明确的运营优化建议。”
“创建一个网页仪表盘，对个人财务状况进行全方位可视化分析。内容必须涵盖收支趋势、资产配置、负债情况、储蓄目标达成进度，以提供明确的财务健康度评估。”
“创建一个网页仪表盘，对XX团队进行全方位绩效可视化分析。内容必须涵盖KPI完成率、任务分布、协作效率、成长趋势，以提供明确的团队管理建议。”
怎么样，效果酷不酷？我们其实可以做很多场景的，你只要把需求稍微改一改就好。
创建一个网页仪表盘，对【分析对象】进行360度全方位的可视化分析。内容必须涵盖【维度1】、【维度2】、【维度3】以及【维度4】，以提供明确的【最终结论/建议类型】。填空就行，不需要会写代码，不需要懂图表配置，不需要设计排版。AI会根据你的维度自动选择合适的图表类型、自动排布布局、自动统一配色。你要做的只是想清楚”我要分析什么、从哪些角度分析、最终要得出什么结论”——这本来就是你工作中已经在做的事情，只是以前没有工具帮你把它”可视化”出来。
最后多说一句：仪表盘类的HTML页面特别适合投到大屏幕上展示。你生成的HTML文件直接用浏览器全屏打开，F11一按，就是一块数据大屏。不需要买什么”数据可视化平台”，不需要部署服务器，一个HTML文件+一个浏览器，零成本实现企业级数据展示。这个性价比，没谁了。
夜雨聆风
