用AI编程从零搭建一个响应式数据看板
做了一个数据看板发给领导，结果领导在手机上打开一看------图表挤在一起，字太小根本看不清。这个故事你可能也遇到过。今天我们用 AI 编程，从零做一个自适应的响应式数据看板，电脑上横排、手机上竖排，还支持多图表联动。
前言
作为一个经常和数据打交道的开发者/运营/产品经理，你可能经历过这样的场景：
- 每周做数据周报，打开 Excel 复制数据、做 5 个图表，至少花 2 小时
- 辛辛苦苦做完的看板，发到群里，领导用手机打开发现完全没法看
- 想让图表之间联动------点了某个品类，其他图表跟着变------但不会写前端代码
如果你也有这些痛点，这篇文章就是为你准备的。不需要你会写代码，你只需要会用自然语言描述需求，剩下的交给 AI。
我使用的是 Claude Code（Anthropic 出品的 AI 编程工具），你也可以用 Cursor、CodeBuddy 等任何支持代码生成的 AI 工具，原理完全一样。
最终效果
我们先看目标：
scss
┌──────────────────────────────────────────────┐
│ 第X周运营数据周报 │
├────────┬────────┬────────┬───────────────────┤
│ GMV │ 订单量 │ 客单价 │ 转化率 │
│ ¥128.5K│ 856单 │ ¥150 │ 3.2% │
├────────┴────────┼────────┴───────────────────┤
│ 品类销售饼图 │ GMV趋势折线图 │
│ (点击联动) │ (联动高亮) │
├─────────────────┼───────────────────────────┤
│ 订单量柱状图 │ 品类TOP5横向柱状图 │
└─────────────────┴───────────────────────────┘- 电脑端（>768px）：2x2 网格布局，图表并排
- 手机端（<=768px）：单列竖排，每个图表占满一行
- 联动交互：点击饼图的某个品类，折线图只高亮该品类趋势
- 一键导出：点击按钮下载高清 PNG 图片
Step 1：先让 AI 出方案，别急着写代码
很多人一上来就告诉 AI "帮我写个看板"，这样效果往往不好。正确的做法是分两步：先让 AI 理解需求并给出方案，确认后再生成代码。
第一步：描述需求
把下面这段话直接发给 AI：
markdown
请用 ECharts 创建一个响应式运营数据看板，要求：
标题："第X周运营数据周报"（可编辑）
顶部------4个核心指标卡片：
- GMV：¥128,500（环比上周 +12.3%，绿色）
- 订单量：856单（环比上周 +8.5%，绿色）
- 客单价：¥150（环比上周 +3.5%，绿色）
- 转化率：3.2%（环比上周 -0.5%，红色）
左上------品类销售饼图（支持点击联动）：
- 服饰：380000
- 食品：250000
- 家居：220000
- 美妆：180000
- 数码：150000
右上------月度趋势折线图：
- 默认显示所有品类近6个月趋势
- 服饰：[58000, 62000, 65000, 68000, 63000, 64000]
- 食品：[38000, 40000, 42000, 44000, 43000, 43000]
- 家居：[35000, 36000, 38000, 37000, 37000, 37000]
- 美妆：[28000, 29000, 30000, 31000, 31000, 31000]
- 数码：[22000, 24000, 25000, 26000, 26000, 27000]
联动逻辑：
1. 点击饼图的某个品类（如"服饰"）
2. 右边折线图只高亮显示该品类的趋势线
3. 其他品类变灰
4. 再次点击取消过滤，恢复全部显示
左下------订单量柱状图：
- 近7天每天的订单量
- 数据：[98, 112, 125, 118, 135, 148, 120]
右下------品类销售TOP5（横向柱状图）
响应式要求：
- 电脑屏幕（>768px）：饼图和柱状图并排显示
- 手机屏幕（<=768px）：所有图表竖排显示，每个占满一行
- 所有图表在窗口大小变化时自动调整尺寸
要求：
- 用CSS Grid或Flex实现响应式布局
- ECharts图表监听resize事件自动调整
- 配色统一
- 添加"下载图片"按钮
- 单个HTML文件提示：需求描述越具体，AI 生成效果越好。包含具体数据、布局要求、交互逻辑，比笼统地说"做个看板"效果好 10 倍。
第二步：确认方案
在 AI 给出方案后，检查几个关键点：
- 它理解了"响应式"吗？ --- 方案中应该提到 CSS Grid/Flex + resize 事件
- 它理解了"联动"吗？ --- 方案中应该提到 ECharts 的 connect 或事件监听机制
- 数据结构对吗？ --- 检查数据格式是否符合 ECharts 要求
如果方案没问题，直接说"同意，开始实现"。如果有偏差，针对性修正。
Step 2：理解 AI 生成的代码核心逻辑
AI 生成的代码可能有几百行，但你不需要全部看懂。掌握以下几个核心概念就够了：
2.1 响应式布局：CSS Grid
css
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认两列 */
gap: 20px;
}
/* 手机端切换为单列 */
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr; /* 手机端单列 */
}
}原理 ：grid-template-columns: repeat(2, 1fr) 表示两列等宽布局。媒体查询 @media (max-width: 768px) 在屏幕宽度小于 768px 时切换为单列。
2.2 图表自适应：resize 监听
javascript
// 关键！不监听resize，图表不会自适应容器大小
window.addEventListener('resize', function() {
chart1.resize();
chart2.resize();
chart3.resize();
chart4.resize();
});原理 ：ECharts 图表初始化时会根据容器尺寸渲染。窗口大小变化后，如果不调用 resize()，图表还是原来的大小，就会溢出或留白。
2.3 多图表联动：connect + 事件监听
javascript
// 方式一：ECharts 内置 connect（简单联动）
ECharts.connect(['chart1', 'chart2']);
// 方式二：自定义事件监听（更灵活）
pieChart.on('click', function(params) {
var selectedCategory = params.name;
// 高亮选中品类，其他品类变灰
lineChart.setOption({
series: [{
data: allData.map(function(item) {
return {
name: item.name,
value: item.value,
lineStyle: item.name === selectedCategory
? { width: 3 }
: { opacity: 0.2 } // 其他品类变灰
};
})
}]
});
});原理 ：饼图的 click 事件被触发后，拿到点击的品类名称，然后动态修改折线图的样式------选中的品类保持高亮，其他品类降低透明度。
2.4 指标卡片：涨绿跌红
javascript
// 环比变化用颜色区分
function getTrendColor(value) {
return value >= 0 ? '#27AE60' : '#E74C3C';
// 正值绿色，负值红色
}这个小细节很关键------领导看周报，一眼就能判断指标好坏。
Step 3：每周更新只需 5 分钟
模板做好后，每周更新数据只需要改几组数据数组：
javascript
// 1. 改日期
title: { text: '第12周运营数据周报' }
// 2. 改核心指标
var gmv = 128500;
var orders = 856;
// 3. 改趋势数据
dailyGmv: [15200, 16800, 18400, 17600, 19500, 21200, 19800]保存后刷新页面，所有图表自动更新。以前做周报要 2 小时，现在只要 5 分钟。
Step 4：导出和分享
AI 生成的代码中通常包含导出功能，核心逻辑如下：
javascript
// 导出为高清PNG
var imgData = chart.getDataURL({
type: 'png',
pixelRatio: 2, // 2倍像素密度，导出更清晰
backgroundColor: '#fff'
});
var link = document.createElement('a');
link.href = imgData;
link.download = '运营周报.png';
link.click();注意 ：
pixelRatio: 2很重要，这是 2 倍像素密度，导出的图片在 Retina 屏幕上也清晰。
统一配色方案
如果你需要统一品牌色，在 ECharts 配置中设置 color 数组即可：
javascript
option = {
// 统一配色方案
color: ['#4A90D9', '#27AE60', '#F39C12', '#E74C3C', '#9B59B6'],
// ...其他配置
};这里推荐几套经过验证的配色方案：
| 方案 | 适用场景 | 色值 |
|---|---|---|
| 商务蓝 | 通用 | #4A90D9 #5DADE2 #2ECC71 #F39C12 #E74C3C |
| 活力橙 | 运营/营销 | #FF6B35 #F7C948 #2EC4B6 #E71D36 #011627 |
| 科技紫 | 技术/产品 | #6C5CE7 #A29BFE #00CEC9 #FD79A8 #FDCB6E |
完整技术栈总结
| 能力 | 技术 | 说明 |
|---|---|---|
| 图表渲染 | ECharts | 百度开源图表库，AI 对它非常熟悉 |
| 响应式布局 | CSS Grid + @media | 电脑端两列，手机端单列 |
| 图表自适应 | ECharts resize() | 窗口变化时重新计算尺寸 |
| 多图表联动 | ECharts click 事件 | 点击饼图联动折线图 |
| 导出高清图 | getDataURL({pixelRatio: 2}) | 2倍像素密度导出 |
| 统一配色 | color 数组 | 5个颜色一套方案 |
实战心得
- 模板思维是关键 --- 做一次模板，每周改数据就行，省下大量重复劳动
- 需求描述要具体 --- 包含布局、数据、交互逻辑，AI 才能一次生成到位
- 先方案后代码 --- 不要上来就写代码，先确认 AI 理解了你的需求
- 联动 = 信息聚焦 --- 图表之间联动，让用户不被海量数据淹没
写在最后
这篇文章展示的只是一个开始。用 AI 编程做数据可视化，核心不是写代码，而是把你的业务需求清晰地翻译成 AI 能理解的指令。
这套方法论不仅适用于数据看板，还可以扩展到：
- 转化漏斗分析
- 用户路径桑基图
- 竞品分析矩阵
- 个人年度数据报告
更多 AI 编程实战案例（100+ 期完整代码与提示词），欢迎关注我的小报童专栏。从零开始，用 AI 把你的每一个想法变成现实。
如果这篇文章对你有帮助，欢迎点赞收藏。有问题欢迎评论区交流。