AI 生成看板初体验：从自然语言到全套 ECharts 多图表协同排版实录
在企业级智能数据分析工具演进中，业务人员对于“数据大屏与看板”的期望正在发生深刻的范式转移：过去是业务提工单 -> 数据分析师出 SQL -> 前端工程师画页面，整个交付周期长达两周；现在业务更希望直接在输入框里敲下一句话：“帮我生成一个包含核心 KPI、华东战区销售趋势、品类毛利分布、以及Top5门店红黑榜的综合运营看板。”
如果直接把这句话丢给通用大模型，生成的通常是散落的、单薄的单个图表代码片段，各个图表之间没有统一的网格栅格布局（Grid Layout），配色彼此冲突，更无法做到点击联动的交互闭环。
如何从一段自然语言输入出发，端到端自动生成一套具备现代化栅格排版、统一无障碍配色、以及跨组件数据联动的高质量多图表 Dashboard？
今天我们深入复盘我们团队自研的“Text2Dashboard 自动化看板装配引擎”的设计架构与完整生成实录。
看板智能生成的三层编译器架构
自动化看板绝对不是单次 Prompt 的黑盒输出，它是一套精密的**“信息架构规划 -> 单图表原子编译 -> 栅格容器装配”**三阶段流水线：
[ 用户自然语言 Prompt: "生成 Q3 季度全域零售运营全景分析大屏" ]
│
▼
【阶段 1：全局信息架构师 (Dashboard Architect Agent)】
– 将业务意图拆解为 4 个结构化组件：
1. 顶部 Header + 4 张核心 KPI 数字卡片 (GMV, 订单量, 客单价, 毛利率)
2. 左侧主力时序图 (24小时走势 + 昨日对比折线图)
3. 右上构成分析图 (品类毛利贡献百分比环形图)
4. 右下执行排查图 (各省份业绩达成率横向条形图)
│
▼
【阶段 2：原子图表编译引擎 (Atomic Chart Compiler)】
– 并行生成每个模块的严格符合 ECharts 5 规范的 Option JSON
– 强制注入企业级标准色板 (Standard Palette) 与无障碍字体层级
│
▼
【阶段 3：响应式栅格装配器 (CSS Grid Layout Assembler)】
– 输出完整的带 CSS Grid 12 列自适应容器的标准化 HTML/Vue 单文件组件
实录输出：大模型生成的结构化 Dashboard 蓝图 JSON
在阶段 1 中，大模型输出标准化的结构描述描述符（Layout Descriptor）：
{
"dashboard_title": "Q3 季度全域零售运营全景指挥舱",
"layout_type": "grid_12_columns",
"theme": "dark_navy",
"widgets": [
{
"id": "kpi_group",
"type": "kpi_cards",
"grid_area": "1 / 1 / 2 / 13",
"cards": [
{"title": "累计 GMV", "value": "¥ 18,420,500", "trend": "+12.4%", "status": "success"},
{"title": "有效订单数", "value": "124,580 单", "trend": "+8.2%", "status": "success"},
{"title": "平均客单价", "value": "¥ 147.86", "trend": "+3.8%", "status": "success"},
{"title": "综合退款率", "value": "2.14%", "trend": "-0.4%", "status": "warning"}
]
},
{
"id": "trend_chart",
"title": "24 小时销售趋势走势对比",
"type": "echarts_line",
"grid_area": "2 / 1 / 4 / 8",
"data_source_metric": "hourly_gmv_comparison"
},
{
"id": "category_pie",
"title": "商品品类营收贡献占比",
"type": "echarts_donut",
"grid_area": "2 / 8 / 3 / 13",
"data_source_metric": "category_share"
},
{
"id": "rank_bar",
"title": "重点大区业绩达成进度 Top 5",
"type": "echarts_horizontal_bar",
"grid_area": "3 / 8 / 4 / 13",
"data_source_metric": "region_achievement_rank"
}
]
}
阶段 3 自动装配渲染生成的 HTML/CSS 核心代码片段
前端渲染引擎根据上述 JSON，瞬间组装出带 GPU 硬件加速的自适应页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Q3 运营大屏</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
body {
margin: 0;
padding: 16px;
background-color: #0f172a;
color: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 90px 320px 320px;
gap: 16px;
height: calc(100vh – 32px);
}
.card-panel {
background: #1e293b;
border-radius: 8px;
border: 1px solid #334155;
padding: 16px;
box-sizing: border-box;
position: relative;
}
.kpi-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.kpi-item {
flex: 1;
background: #0f172a;
padding: 12px 16px;
border-radius: 6px;
border-left: 4px solid #38bdf8;
}
.kpi-val { font-size: 24px; font-weight: bold; margin-top: 4px; color: #38bdf8; }
</style>
</head>
<body>
<div class="dashboard-grid">
<!– 1. 顶部 KPI 卡片区 –>
<div class="card-panel" style="grid-area: 1 / 1 / 2 / 13;">
<div class="kpi-container">
<div class="kpi-item"><div>今日累计 GMV</div><div class="kpi-val">¥ 18,420,500 <small style="font-size:12px;color:#4ade80;">↑12.4%</small></div></div>
<div class="kpi-item"><div>有效成单量</div><div class="kpi-val">124,580 单 <small style="font-size:12px;color:#4ade80;">↑8.2%</small></div></div>
<div class="kpi-item"><div>平均客单价</div><div class="kpi-val">¥ 147.86 <small style="font-size:12px;color:#4ade80;">↑3.8%</small></div></div>
<div class="kpi-item" style="border-left-color: #f59e0b;"><div>售后退款率</div><div class="kpi-val" style="color:#f59e0b;">2.14% <small style="font-size:12px;color:#4ade80;">↓0.4%</small></div></div>
</div>
</div>
<!– 2. 主力折线图 –>
<div class="card-panel" id="chart-trend" style="grid-area: 2 / 1 / 4 / 8;"></div>
<!– 3. 品类占比环形图 –>
<div class="card-panel" id="chart-pie" style="grid-area: 2 / 8 / 3 / 13;"></div>
<!– 4. 大区排行条形图 –>
<div class="card-panel" id="chart-bar" style="grid-area: 3 / 8 / 4 / 13;"></div>
</div>
<script>
// 统一主题配色
const colors = ['#38bdf8', '#818cf8', '#34d399', '#f472b6', '#fbbf24'];
// 渲染主力折线图
const trendChart = echarts.init(document.getElementById('chart-trend'));
trendChart.setOption({
title: { text: '24小时销售趋势对比 (今日 vs 昨日)', textStyle: { color: '#f8fafc', fontSize: 14 } },
tooltip: { trigger: 'axis' },
color: ['#38bdf8', '#64748b'],
xAxis: { type: 'category', data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:00'], axisLine: { lineStyle: { color: '#64748b' } } },
yAxis: { type: 'value', splitLine: { lineStyle: { color: '#334155' } } },
series: [
{ name: '今日实时', type: 'line', smooth: true, data: [120, 80, 450, 920, 840, 1200, 980] },
{ name: '昨日同期', type: 'line', smooth: true, lineStyle: { type: 'dashed' }, data: [110, 75, 410, 830, 790, 1050, 890] }
]
});
// 渲染环形图
const pieChart = echarts.init(document.getElementById('chart-pie'));
pieChart.setOption({
title: { text: '商品品类营收占比', textStyle: { color: '#f8fafc', fontSize: 14 } },
tooltip: { trigger: 'item' },
color: colors,
series: [{
type: 'pie',
radius: ['45%', '70%'],
avoidLabelOverlap: false,
label: { show: true, color: '#94a3b8' },
data: [
{ value: 1048, name: '数码 3C' },
{ value: 735, name: '生鲜食品' },
{ value: 580, name: '服饰鞋包' },
{ value: 484, name: '美妆个护' }
]
}]
});
// 渲染条形图
const barChart = echarts.init(document.getElementById('chart-bar'));
barChart.setOption({
title: { text: '重点大区达成率 Top 5', textStyle: { color: '#f8fafc', fontSize: 14 } },
tooltip: { trigger: 'axis' },
xAxis: { type: 'value', max: 100, splitLine: { lineStyle: { color: '#334155' } }, axisLabel: { formatter: '{value}%' } },
yAxis: { type: 'category', data: ['华东', '华南', '华北', '西南', '华中'], axisLine: { lineStyle: { color: '#64748b' } } },
series: [{
type: 'bar',
itemStyle: { color: '#38bdf8', borderRadius: [0, 4, 4, 0] },
data: [98.2, 92.5, 88.4, 82.1, 78.6]
}]
});
window.addEventListener('resize', () => {
trendChart.resize();
pieChart.resize();
barChart.resize();
});
</script>
</body>
</html>
