用AI编程从零搭建一个响应式数据看板

> 做了一个数据看板发给领导，结果领导在手机上打开一看------图表挤在一起，字太小根本看不清。这个故事你可能也遇到过。今天我们用 AI 编程，从零做一个**自适应的响应式数据看板**，电脑上横排、手机上竖排，还支持多图表联动。 ## 前言 作为一个经常和数据打交道的开发者/运营/产品经理，你可能经历过这样的场景： - 每周做数据周报，打开 Excel 复制数据、做 5 个图表，至少花 2 小时 - 辛辛苦苦做完的看板，发到群里，领导用手机打开发现完全没法看 - 想让图表之间联动------点了某个品类，其他图表跟着变------但不会写前端代码 如果你也有这些痛点，这篇文章就是为你准备的。**不需要你会写代码**，你只需要会用自然语言描述需求，剩下的交给 AI。 我使用的是 **Claude Code**（Anthropic 出品的 AI 编程工具），你也可以用 Cursor、CodeBuddy 等任何支持代码生成的 AI 工具，原理完全一样。 ## 最终效果 我们先看目标： ``` ┌──────────────────────────────────────────────┐ │ 第X周运营数据周报 │ ├────────┬────────┬────────┬───────────────────┤ │ GMV │ 订单量 │ 客单价 │ 转化率 │ │ ¥128.5K│ 856单 │ ¥150 │ 3.2% │ ├────────┴────────┼────────┴───────────────────┤ │ 品类销售饼图 │ GMV趋势折线图 │ │ (点击联动) │ (联动高亮) │ ├─────────────────┼───────────────────────────┤ │ 订单量柱状图 │ 品类TOP5横向柱状图 │ └─────────────────┴───────────────────────────┘ ``` - **电脑端**（>768px）：2x2 网格布局，图表并排 - **手机端**（<=768px）：单列竖排，每个图表占满一行 - **联动交互**：点击饼图的某个品类，折线图只高亮该品类趋势 - **一键导出**：点击按钮下载高清 PNG 图片   ## Step 1：先让 AI 出方案，别急着写代码 很多人一上来就告诉 AI "帮我写个看板"，这样效果往往不好。**正确的做法是分两步**：先让 AI 理解需求并给出方案，确认后再生成代码。 ### 第一步：描述需求 把下面这段话直接发给 AI： ``` 请用 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 给出方案后，检查几个关键点： 1. **它理解了"响应式"吗？** --- 方案中应该提到 CSS Grid/Flex + resize 事件 2. **它理解了"联动"吗？** --- 方案中应该提到 ECharts 的 connect 或事件监听机制 3. **数据结构对吗？** --- 检查数据格式是否符合 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个颜色一套方案 | ## 实战心得 1. **模板思维是关键** --- 做一次模板，每周改数据就行，省下大量重复劳动 2. **需求描述要具体** --- 包含布局、数据、交互逻辑，AI 才能一次生成到位 3. **先方案后代码** --- 不要上来就写代码，先确认 AI 理解了你的需求 4. **联动 = 信息聚焦** --- 图表之间联动，让用户不被海量数据淹没 ## 写在最后 这篇文章展示的只是一个开始。用 AI 编程做数据可视化，核心不是写代码，而是**把你的业务需求清晰地翻译成 AI 能理解的指令**。 这套方法论不仅适用于数据看板，还可以扩展到： - 转化漏斗分析 - 用户路径桑基图 - 竞品分析矩阵 - 个人年度数据报告 > 更多 AI 编程实战案例（100+ 期完整代码与提示词），欢迎关注我的小报童专栏。从零开始，用 AI 把你的每一个想法变成现实。 --- *如果这篇文章对你有帮助，欢迎点赞收藏。有问题欢迎评论区交流。*