用码道5分钟搭建一个漂亮的销售数据看板
在码道中通过多轮对话开发销售数据看板
场景：零售公司销售总监，不会写代码，但需要销售数据看板。全程通过自然语言与码道（CodeArts）对话，4 轮交互完成开发。
本文目标：记录每一轮对话的指令、码道的理解与执行过程、结果与调整思路。其他人照着这些指令在码道里说同样的话，也能做出同样的看板。
一、案例背景
| 项目 | 说明 |
|---|---|
| 角色 | 零售公司销售总监，无编程基础 |
| 目标 | 销售数据看板：各省销售情况、Top销售品类、月度趋势等 |
| 数据 | 先用模拟数据，后续对接公司数据库 |
| 工具 | 码道（CodeArts）— 华为云代码智能体 |
| 总轮次 | 4 轮对话，从零到完整看板 |
二、对话全过程
第 1 轮：提出需求，码道从零搭建完整看板
我说的
我是一个零售公司的销售总监，帮我开发一个销售数据看板，让我能轻松看到各个省的销售情况、Top销售品类等。具体数据可以先模拟，以后再对接公司数据库
码道做了什么
码道将这句话拆解为以下理解：
- 角色识别：销售总监 → 需要决策视角的看板，不是技术调试界面
- 核心需求提取：各省销售情况 + Top销售品类 → 至少需要省份维度和品类维度的可视化
- 约束识别：数据先模拟 → 需要数据生成脚本；以后对接数据库 → 数据层与展示层要分离，方便后续替换
码道自主完成了以下工作（无需我追问任何细节）：
① 选择技术方案
- 数据生成：Python 脚本（因为后续对接数据库也用 Python）
- 可视化呈现：纯 HTML + ECharts 图表库（无需安装构建工具，双击即可打开）
- 数据传递：Python 生成 JS 数据文件，HTML 直接引用（避免浏览器跨域问题）
② 加载设计技能
- 码道识别到这是前端可视化任务，自动加载了"前端设计"技能
- 根据"企业看板"场景，选择了 Minimalist Modern 设计风格（Electric Blue 主题，白色卡片 + 微阴影）
- 而非通用模板，确保看板有设计感而非"AI生成的塑料感"
③ 生成模拟数据
- 码道设计了 20 个省份、8 个品类的模拟数据
- 加入了真实业务特征：省份权重（广东销量最高）、品类权重（服装鞋包排第一）、月度季节性（年底旺季）
- 输出 JSON（可读）和 JS（供 HTML 引用）两个文件
④ 搭建看板骨架
码道一次性创建了包含以下模块的完整看板：
| 模块 | 图表类型 | 作用 |
|---|---|---|
| KPI 卡片区 | 数字卡片 ×4 | 总销售额、总订单数、总客户数、客单价 |
| 各省销售排名 | 横向柱状图 | Top3 渐变高亮，一眼看出排名 |
| Top 销售品类 | 横向条形图 | 按销售额降序，带同比 |
| 月度销售趋势 | 双轴折线图 | 销售额 + 订单数，可切换近3/6/12月 |
| 省份×品类热力图 | 热力矩阵 | 交叉分析，颜色深浅 = 销售额 |
| 省份销售明细 | 数据表格 | 排名、占比条、同比，支持悬停 |
⑤ 实现交互联动
- 顶部省份下拉筛选 → 联动所有图表
- 时间范围切换（近3/6/12月）→ 联动趋势图
- 柱状图点击 → 联动热力图高亮
- 刷新按钮 → 重新加载数据
⑥ 自验证
- 运行 Python 脚本确认数据生成成功
- 用 Node.js 检查 HTML 内嵌 JS 语法无误
- 在浏览器中打开看板确认渲染
结果
一轮对话就得到了一个功能完整、有设计感的销售看板。关键体会：初始指令要说出角色 + 核心需求 + 约束条件，码道能据此自主完成大量决策，不需要逐项追问。
第 2 轮：追加全国地图
我说的
在主数据之后加一个全国地图显示
码道做了什么
- 定位插入点："主数据"指 KPI 卡片区，地图应放在 KPI 之后、其他图表之前
- 技术实现：
- ECharts 5.x 不内置中国地图，码道自动从阿里云 DataV 加载中国地图 GeoJSON 数据
- 处理了一个细节：地图数据中省份名带后缀（“广东省”），而模拟数据中是简称（“广东”），码道自动建立了名称映射表
- 地图功能：
- 按省份销售额着色（浅蓝→深蓝渐变）
- 悬停显示省份详情（销售额、订单数、客户数、同比）
- 点击省份 → 联动上方筛选器 + 下方所有图表
- 支持滚轮缩放和拖拽
- 验证：JS 语法检查通过，浏览器打开确认
结果
地图成功添加在 KPI 卡片下方。关键体会：追加功能时指令要明确位置（“在主数据之后”），码道能准确找到插入点。
第 3 轮：优化排版
我说的
地图占的版面太大了，看看能否优化一下整体的排版
码道做了什么
- 诊断问题：地图独占一整行且 420px 高，纵向占用过多，导致整体页面过长
- 重新规划布局：
| 优化前 | 优化后 |
|---|---|
| KPI → 地图(全宽420px) → 排名+品类 → 趋势+热力图 → 表格 | KPI → 地图+排名(并排360px) → 品类+趋势 → 热力图(全宽) → 表格 |
- 排版逻辑：
- 地图与各省排名展示同一维度数据（省份），并排放一起有逻辑关联
- 热力图是宽矩阵（20行×8列），全宽展示更合理
- 所有图表高度统一为 360px，视觉节奏一致
- 验证：语法检查通过，浏览器确认效果
结果
整体减少约一行高度，信息密度更高。关键体会：提优化时说出"什么有问题"即可（“地图占版面太大”），码道会自主判断如何调整，不需要我指定具体布局方案。
第 4 轮：输出技术案例
我说的
把这次我与码道的对话最终开发出这个销售数据看板的过程，写成一篇技术案例，让其他人拿到这个案例，照着做，也能在码道里做出这个看板
码道做了什么
码道回顾全部对话过程，撰写了本篇技术案例——记录每轮指令、执行过程、结果与体会。
结果
得到本文档。关键体会：码道能回顾对话上下文，将整个开发过程提炼为可复现的案例。
三、最终看板全貌
┌─────────────────────────────────────────────┐
│ 销售数据看板 [数据时间] [刷新数据] │
├─────────────────────────────────────────────┤
│ [省份筛选 ▼] [近3月|近6月|近12月] │
├──────────┬──────────┬──────────┬────────────┤
│ 总销售额 │ 总订单数 │ 总客户数 │ 客单价 │
├──────────┴──────────┴──────────┴────────────┤
│ 全国销售地图 │ 各省销售排名 │
│ (按省份着色+点击联动) │ (横向柱状图) │
├────────────────────────┼────────────────────┤
│ Top销售品类 │ 月度销售趋势 │
│ (横向条形图) │ (双轴折线图) │
├────────────────────────┴────────────────────┤
│ 省份 × 品类 销售热力图 (全宽交叉矩阵) │
├─────────────────────────────────────────────┤
│ 省份销售明细表 (排名/占比条/同比) │
└─────────────────────────────────────────────┘
四、复现指南：在码道中照着说
在码道中新建一个空项目，依次发送以下 3 条指令即可复现：
指令 1（搭建看板）
我是一个零售公司的销售总监，帮我开发一个销售数据看板，让我能轻松看到各个省的销售情况、Top销售品类等。具体数据可以先模拟，以后再对接公司数据库
指令 2（追加地图）
在主数据之后加一个全国地图显示
指令 3（优化排版）
地图占的版面太大了，看看能否优化一下整体的排版
五、对话技巧总结
| 技巧 | 说明 | 示例 |
|---|---|---|
| 说出角色 | 让码道理解你的视角，做出合适的决策 | “我是零售公司的销售总监” |
| 说出核心需求 | 明确要看到什么数据，码道会自动补全合理的可视化 | “各省销售情况、Top销售品类” |
| 说出约束 | 让码道知道边界条件，避免过度设计 | “数据先模拟，以后再对接数据库” |
| 追加功能说位置 | 码道能准确定位插入点 | “在主数据之后加一个全国地图” |
| 提优化说问题 | 不用给方案，说出哪里不满意即可 | “地图占的版面太大了” |
| 让码道自主决策 | 不逐项追问细节，信任码道的判断 | 初始指令后无需追问"用什么颜色"“用什么图表” |
为什么不需要懂代码？
- 码道自动选型：Python 做数据、HTML+ECharts 做展示，无需用户指定
- 码道自动设计：加载设计技能，选择企业看板风格，而非通用模板
- 码道自动验证：语法检查、浏览器预览，发现问题自行修复
- 用户只需表达需求：要什么、加什么、改什么，用自然语言说即可
六、后续对接真实数据库
当模拟数据看板满意后，对接公司数据库只需对码道说：
把数据生成脚本里的模拟数据替换为从公司数据库查询，数据库连接信息是 xxx，表结构是 xxx
码道会修改 Python 脚本的数据来源部分，HTML 看板无需任何改动即可自动适配真实数据。
- 点赞
- 收藏
- 关注作者
评论（0）