shield_lock
JinDaGe
← Back to skills
extension
Category: Data & AnalyticsNo API key required

交互式数据预演沙盘

将结构化业务数据（Excel/CSV/测试报告）转化为可交互的「数据预演沙盘」单页HTML—— 左侧参数滑块实时联动，右侧KPI卡片+对比图表+明细表即时重算。适用于：多方案/多配置 对比选型、能耗/成本/收益测算、what-if情景推演、技术参数敏感性分析、测试数据可视化 交付。当用户说「做个沙盘」「交互式对比」「可调节的分析页面」「把数据做成能拖的工具」 「预算/能耗/成本推演工具」时使用。产出为离线可用的单HTML+本地echarts.min.js， 双击即可在浏览器打开，无需联网、无需安装。

personAuthor: user_1b84b76dhubcommunity
downloadDownload package

交互式数据预演沙盘

把一份静态数据表变成一个「能拖滑块、实时看结果」的交互页面，让非技术同事也能自己调参做决策。

核心原则

  1. 先算清楚，再做页面：所有指标必须先用Python从源数据算出来，页面只是可视化和参数联动，不在页面里藏未验证的计算逻辑。
  2. 离线可用：ECharts必须用本地文件引用，禁止CDN（内网/受限浏览器加载失败是第一大坑）。
  3. 全量替换渲染：setOption(option, true) 第二个参数必须为 true，避免增量合并导致图表不刷新。
  4. 错误可见：页面顶部留红色错误框，JS异常时直接显示，不要静默失败。

五步工作流

第一步：数据探查与口径确认

  • 用 openpyxl / pandas 完整读取源文件，列出所有sheet、字段、数据范围
  • 确认关键口径：计量单位、时间粒度、聚合方式、是否有汇总行需剔除
  • 识别「方案/配置维度」（有哪些可对比的对象）和「指标维度」（要算哪些数）
  • 多sheet/多文件时先建立字段映射，确认可比口径一致

第二步：分析计算（Python，结果存JSON）

  • 对每个方案计算所有指标，输出为结构化JSON
  • 必须包含：方案ID/名称/来源/备注、各参数点下的指标值、效率/符合性等辅助字段
  • 关键计算用 calculator 工具或Python脚本复算，禁止手算
  • 计算结果保存为 sandbox_data.json，作为页面的唯一数据源

第三步：沙盘设计（一页纸规划）

在写代码前先确定以下内容（写在临时笔记里即可）：

| 设计项 | 要回答的问题 | |---|---| | 滑块参数 | 哪些参数用户会调？（风量/电价/运行小时/数量/折扣率…）每个的min/max/step/default | | KPI卡片 | 顶部展示哪4个核心指标？每个的颜色标识和单位 | | 曲线图 | 什么参数作为X轴？几条曲线（每个方案一条）？ | | 构成图 | 饼图/环形图展示什么的占比？（当前方案的成本构成/阻力构成/能耗构成） | | 柱状图 | 各方案的什么指标横向对比？是否标最优线？ | | 对比表 | 哪些列？是否高亮最优行？ | | 结论区 | 页面顶部放哪3-5条核心洞察？ |

第四步：生成HTML

  1. 复制 assets/template.html 到输出目录，改名为业务相关名称
  2. 把第二步的JSON数据内嵌到HTML的 <script> 中（替换 /* DATA_PLACEHOLDER */）
  3. 按第三步的设计定制：
    • 滑块定义（PARAMS 数组）
    • 方案数据（SCENARIOS 数组）
    • 计算函数（calcMetrics() 根据当前滑块值重算）
    • KPI更新（updateKPIs()）
    • 三个图表的 updateXxxChart()
    • 对比表 updateTable()
  4. 运行 scripts/ensure_echarts.py <输出目录> 把 echarts.min.js 放到同目录
  5. 禁止：CDN引用、内嵌1MB大文件（会有</script>截断风险）、setOption不加true

第五步：验证与交付

  • 用浏览器打开HTML，逐项检查：滑块拖动时KPI和图表是否实时变化、6个方案切换是否正常、图表有无空白
  • 运行 scripts/verify_sandbox.py <html路径> 做静态检查（ECharts引用、关键函数存在、数据完整性）
  • 交付时必须同时给 xxx.html 和 echarts.min.js，并说明「两个文件放同一文件夹，双击HTML打开」
  • 用 present_files 交付两个文件

常见坑与避坑指南

| 坑 | 现象 | 解法 | |---|---|---| | CDN加载失败 | 图表区域全白，坐标轴都没有 | 必须用本地echarts.min.js，scripts/ensure_echarts.py | | 内嵌大文件截断 | 坐标轴有但数据线没有 | 禁止内嵌，用独立JS文件引用 | | setOption增量合并 | 切换方案后图表数据不刷新或重叠 | 所有setOption必须加第二参数 true | | 线条颜色缺失 | 曲线点有但线看不见 | 必须同时设 lineStyle.color 和 itemStyle.color | | 透明背景异常 | 图表区域白底/黑底异常 | 用实色背景如 #162230，不用 transparent | | 初始化时机不对 | 偶发图表不渲染 | 包在 DOMContentLoaded 或 if(document.readyState==='loading') 里 | | 滑块步长不合理 | 拖半天数值不变 | step要合理（风量125、电价0.05、数量1） | | 只给HTML不给JS | 同事打开全白 | 交付必须两个文件一起，说明放同目录 |

参考文件

  • 计算模式：references/calculation-patterns.md — 风机功率/年能耗/成本节省/线性插值/效率穿透等常用公式
  • 图表配方：references/chart-recipes.md — 折线图/饼图/柱状图的ECharts配置模板，直接复制改数据
  • 页面模板：assets/template.html — 完整的沙盘HTML模板，含深色主题布局、滑块、KPI、三图表、表格框架

脚本

  • scripts/ensure_echarts.py <目录> — 下载echarts.min.js到指定目录（已存在则跳过）
  • scripts/verify_sandbox.py <html路径> — 静态检查HTML是否符合沙盘规范