一、需求分析业务场景与看板结构本次实验以电商经营数据为对象为运营岗搭建一张月度经营看板。选择这一场景是因为它的数据本身带有层次时间按月推进渠道分线上商城与直播电商品类六项流量五个来源且核心指标口径清晰适合检验“从数据到结论”的可视化能力。看板按“先看总体、再看走势、最后看结构”的阅读习惯分为四层概览层成交总额、订单量、客单价、退款率四项大盘指标并附环比变化趋势层近 12 个月成交额走势区分线上商城与直播电商结构层品类销售额排序与流量来源占比明细层与图形一一对应的数据表支持逐行核对。视觉上以科技蓝#1890FF为主色橙、绿作辅助色区分系列背景取浅灰白#F5F7FA全站统一使用“万元、单、%”与千分位写法避免同一指标出现多种量纲。二、数据准备示例数据生成与清洗实验环境没有真实交易数据因此借助 AI 辅助编写 Python 脚本生成 2025 年 10 月至 2026 年 9 月共 12 个月的示例数据字段覆盖月份、渠道、品类与流量来源并同时导出 CSV 与 JSON保证图表和明细表读的是同一份源数据。清洗环节主要做三件事口径统一以“成交总额线上商城直播电商”为基准客单价按“成交总额÷订单量”计算退款率单独列示异常剔除删除金额为负、为空以及渠道字段缺失的记录结构拆分把宽表按分析主题拆成“月度成交额”“品类销售额”“流量来源”三张统计表减少前端二次计算。这一步的原则是先把口径定死再动手画图否则后面对不上数时很难判断是数据错了还是图形错了。三、看板实现从单图到整页整合看板由 HTMLCSS 配合 ECharts 静态整合而成自上而下为头部、指标卡、趋势图、结构图与明细表五段。图 1 是首屏效果标题右侧预留深色模式开关副标题固定显示统计周期与“静态示例数据”标签避免演示数据被误读为真实经营结果。四张指标卡是看板的第一落点——成交总额 1,418.0 万元环比 7.4%、订单量 94,520 单5.8%、客单价 150.0 元1.5%、退款率 2.46%上升 0.32 个百分点。向好项用绿色退款率上升用红色颜色对应业务含义而不只是装饰。趋势区用双折线呈现 12 个月变化横轴 2025-10 至 2026-09纵轴单位为万元线尾直接标出当期数值线上 1,096、直播 322。曲线显示年内有两处明显波动2025-12 前后冲高2026-02 回落至低点此后逐月回升。线上商城始终是大盘主力直播电商体量较小但斜率更陡属于可以继续加投的渠道。结构区见图 2品类条形图按金额降序排列“服饰鞋包”453.8 万元与“数码家电”340.3 万元合计已超过一半环形图以 256.8 万总访客为中心外圈依次为自然搜索 36%、付费广告 26%、社交媒体 19%、直接访问 12%、其他 7%可直接用于判断流量结构是否健康。图 2 品类销售额与流量来源占比2026 年 9 月明细区见图 3页面底部放置品类、月度、流量三张表数据与上方图形同源合计行加粗单列做到“图上有形、表上有数”。图 3 品类销售额明细左与月度成交额明细右图 4 流量来源明细及页面底部的数据说明四、验证与复盘数据核对从“同一个数换个位置是否还对得上”入手共抽查五处· 指标卡 1,418.0 万元 月度表 2026-09 行“线上 1,096 直播 322”· 品类表六项相加 453.8340.3226.9184.3127.685.1 1,418.0 万元· 客单价 1,418.0 万元 ÷ 94,520 单 ≈ 150.0 元· 流量表 92.466.848.830.818.0 256.8 万· 月度表 12 个月累计 12,702 万元 线上 10,198 直播 2,504。五处全部闭合说明清洗规则与图表取值是一致的。更值得记下来的是口径差异指标卡、品类图、流量图用的都是 2026 年 9 月单月数而月度表的合计是 12 个月累计值两者不能放在一起比较。不同时间窗口的数字一旦混用图做得再精致结论也是错的。踩坑记录首版环形图的图例紧贴圆环与中心总数“256.8”抢位置窄屏下文字相互挤压。处理时缩小了环半径把图例移到右侧并留出边距同时压缩了图例项间距由图 2 看当前间距已经够用但屏幕更窄时仍有风险后续可改为标签外置。经验AI 能很快给出 ECharts 的配置骨架与图元结构省去逐条翻文档的时间而指标口径、配色分寸和数字校验必须由人把关。人机分工的边界大致就在“代码实现”与“业务判断”之间。五、总结本次实验完整走通了“需求分析—数据清洗—图表设计—页面整合—数据校验”的流程最终交付一张结构清晰、图数对应的经营看板。更重要的收获是认识到看板的价值不在图形是否炫目而在能否让人一眼看出哪里在涨、哪里在跌、下一步该看什么。AI 把实现的门槛降得很低判断的责任反而更重了。