1. 运营周报的痛Excel 数据到 ECharts 报告为什么总卡在最后一步做运营或者销售支持的同学大概率都经历过这样的循环周一早上拿到一份几十列、几百行的 Excel 明细先做透视表再算同比环比然后打开图表工具画图最后复制到 PPT 或者 Word 里排版。数据一改整套流程重来一遍。这个链路里最耗时的其实不是分析本身而是「数据 → 图表 → 可交付文档」这段搬运工作。我试过把这段搬运交给 Claude 来做配合 ECharts 生成单文件 HTML 仪表盘整个链路能压缩到几分钟。核心思路是让 Claude 读取 Excel 的字段结构和数据语义输出一份包含 ECharts 配置的完整 HTML浏览器直接打开就是可交互的看板。运营周报、销售看板、渠道复盘这类场景基本都能套这个模板。这篇文章要交付的东西很具体一份可复制的提示词模板、一份 Excel 字段到 ECharts series 的映射配置、几段能直接跑的 ECharts option 片段以及运行后怎么校验图表数据和 HTML 渲染结果。适合谁会一点 Excel、能看懂 HTML 结构、但不想手写前端代码的运营和数据分析同学。你不需要会 Vue 或者 ReactECharts 的 CDN 引入方式对单文件 HTML 足够友好。整个链路里Claude 负责三件事理解 Excel 的 Sheet 结构和字段含义、根据字段类型推荐图表类型、生成带 ECharts 配置的 HTML。ECharts 负责渲染浏览器负责展示。中间不需要起后端服务也不需要装 Node 环境。下面按「准备模型访问 → 写提示词 → 配 ECharts → 验证结果 → 排错」的顺序展开。2. 前置准备用 TaoToken 接入 Claude 并配置模型访问要让 Claude 稳定处理 Excel 文件并生成代码第一步是有一个可用的模型访问入口。TaoToken 提供 Claude 系列模型的 API 接入Base URL 是https://taotoken.net/api兼容 Anthropic 的接口格式。如果你用的是 Claude Code 或者 Cline 这类编码工具配置方式略有不同但核心三件套是一样的Base URL、API Key、Model ID。先到控制台创建 API Key。打开https://taotoken.net/console登录后在 API Keys 页面新建一个 Key复制出来保存好。这个 Key 只显示一次丢了就重新建。接着确认你要用的模型 IDClaude 系列常用的有claude-sonnet-4-20250514这类命名具体以文档页的模型列表为准文档地址是https://taotoken.net/doc。如果你在 Claude Code 里用配置写在~/.claude/settings.json或者项目级的.claude/settings.json里。一个可复制的最小配置片段如下注意把sk-开头的 Key 换成你自己的{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }如果你用的是 Cline 或者 Roo Code 这类 VS Code 插件在设置里选 Anthropic 兼容模式Base URL 填https://taotoken.net/apiAPI Key 填刚才创建的Model ID 填claude-sonnet-4-20250514。Cline 的 MCP 配置如果涉及文件读取建议只挂载项目目录不要指向生产数据库或者敏感路径。Codex 用户如果走auth.json方式配置结构类似把 base_url 和 api_key 对应填上即可。这里要提醒一句Base URL 后面不要多加/v1或者/messagesTaoToken 的接口路径已经处理好了多写反而会 404。配置完成后先用一个最简单的对话请求验证连通性再进入 Excel 处理环节。模型对话入口在https://taotoken.net/chat如果你只是想先试试模型对 Excel 字段的理解能力可以在这里上传一个小样本文件问它「这个 Sheet 里哪些字段适合做趋势图哪些适合做占比图」。这一步能帮你提前判断模型对数据语义的把握程度避免后面生成一堆不合适的图表。3. 可复制配置Excel 字段映射与 ECharts option 片段这一节是整篇文章的核心给你可以直接抄的配置。先约定一个 Excel 结构假设你有一份销售明细Sheet 名叫订单明细字段包括订单日期、城市、渠道、品类、销售额、订单量。运营周报通常关心四类图月度趋势折线、城市排行柱状、渠道占比饼图、品类对比柱状或雷达。第一步是让 Claude 输出字段映射配置。你可以把下面这段提示词模板直接发给 Claude把你的文件.xlsx换成实际文件名请读取 销售明细.xlsx 的「订单明细」Sheet先输出字段清单和数据类型判断。 然后按以下规则生成 ECharts 配置 1. 日期字段作为 xAxis 的 category按月份聚合销售额生成折线图 2. 城市字段按销售额降序取前 8 名生成柱状图 3. 渠道字段按销售额汇总生成饼图 4. 品类字段按销售额汇总生成横向柱状图。 输出一个完整的单文件 HTMLECharts 用 CDN 引入所有图表放在同一页面 每个图表容器有独立的 id页面底部加一段 resize 监听。 不要用任何前端框架不要引入外部 CSS 文件。Claude 返回的 HTML 里ECharts 的 option 是重点。下面给你一段经过验证的折线图 option可以直接替换数据数组使用const trendOption { tooltip: { trigger: axis }, legend: { data: [销售额, 订单量], bottom: 0 }, grid: { left: 50, right: 24, top: 24, bottom: 48 }, xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: [ { type: value, name: 销售额, axisLabel: { formatter: {value} } }, { type: value, name: 订单量, axisLabel: { formatter: {value} } } ], series: [ { name: 销售额, type: line, smooth: true, yAxisIndex: 0, data: [128000, 143000, 119000, 167000, 182000, 201000], lineStyle: { width: 3, color: #4a90d9 }, areaStyle: { color: rgba(74,144,217,0.12) } }, { name: 订单量, type: bar, yAxisIndex: 1, barWidth: 32%, data: [820, 910, 760, 1040, 1180, 1320], itemStyle: { color: #27ae60, borderRadius: [4, 4, 0, 0] } } ] };饼图的关键是radius和label的配合避免标签重叠。下面这段是渠道占比的配置radius: [40%, 68%]做成环形图视觉上比实心饼更清爽const channelOption { tooltip: { trigger: item, formatter: {b}: {c} ({d}%) }, legend: { orient: horizontal, bottom: 0 }, series: [{ type: pie, radius: [40%, 68%], center: [50%, 46%], avoidLabelOverlap: true, itemStyle: { borderRadius: 6, borderColor: #fff, borderWidth: 2 }, label: { show: false }, emphasis: { scale: true, scaleSize: 8 }, data: [ { value: 186000, name: 线上直营 }, { value: 142000, name: 经销商 }, { value: 98000, name: 门店零售 }, { value: 64000, name: 其他渠道 } ] }] };字段映射这块建议在提示词里明确告诉 Claude 每个字段的角色避免它把「订单量」当成维度去画饼图。你可以用一张对照表来约束比如Excel 字段角色推荐图表聚合方式订单日期时间维度折线图 xAxis按月分组城市分类维度柱状图 xAxis按销售额求和后降序渠道分类维度饼图 series.data按销售额求和品类分类维度横向柱状图 yAxis按销售额求和销售额度量series.datasum订单量度量次坐标轴 series.datasum把这张表连同提示词一起发给 Claude它生成的 option 结构会稳定很多。实测下来不带字段角色说明时模型有概率把「订单量」和「销售额」画在同一坐标轴上导致柱子和折线比例失调。加上角色说明后双轴配置基本一次到位。4. 验证请求跑通 HTML 并校验图表数据与渲染结果配置写完后把 Claude 生成的 HTML 保存为report.html双击用浏览器打开。正常情况下你会看到页面顶部有标题和统计卡片下面按网格排列着折线图、柱状图、饼图。如果页面空白先按 F12 打开控制台看报错最常见的是 ECharts CDN 没加载成功或者某个容器 id 拼错了。数据校验分两步。第一步核对图表上的数字和 Excel 透视表是否一致。比如折线图 6 月的销售额是 201000你就在 Excel 里对 6 月做一次 sum看是否吻合。饼图的占比之和应该是 100%如果出现 99.9% 或者 100.1%通常是浮点舍入不影响结论但要在报告里注明。第二步检查坐标轴范围ECharts 默认从 0 开始如果数据都在 100000 以上柱子会显得很矮可以在 yAxis 里加min或者scale: true让轴自适应。下面这段是验证用的最小 HTML 骨架你可以把它和 Claude 生成的 option 拼在一起快速测试单个图表是否正常渲染!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title图表验证/title script srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script style #chart { width: 100%; height: 360px; } /style /head body div idchart/div script const chart echarts.init(document.getElementById(chart)); chart.setOption(trendOption); window.addEventListener(resize, () chart.resize()); /script /body /html渲染结果校验还有一个容易忽略的点中文字体。ECharts 默认字体在部分 Windows 机器上会回退成宋体看起来比较旧。可以在 option 顶层加textStyle: { fontFamily: PingFang SC, Microsoft YaHei, sans-serif }统一字体。另外如果图表容器高度设成百分比父元素必须有确定高度否则 ECharts 初始化时拿不到高度图表会塌成一条线。建议容器直接用固定像素高度比如height: 360px。如果你想让 Claude 直接帮你做数据校验可以在生成 HTML 后追加一句提示词「请把每个图表 series 里的 data 数组和 Excel 对应 Sheet 的聚合结果做一次比对列出不一致的项」。模型会输出一份对照清单你拿着清单去 Excel 里复核比人工逐个看图快很多。这一步在数据量大、图表多的时候特别有用。5. 常见报错排查401、local proxy failed、reading choices 与 OAuth接入和运行过程中报错基本集中在几个固定位置。下面按真实遇到的频率排序给出定位方法和处理动作。401 UnauthorizedAPI Key 无效或者没带上。先检查ANTHROPIC_API_KEY是否完整复制有没有多余空格。如果用的是 Claude Code确认settings.json里env字段的层级正确Key 不要写在顶层。还有一种情况是 Key 被删除或者过期去控制台重新建一个。401 不会因为模型 ID 写错而触发模型 ID 错误通常返回 404 或者 400。local proxy failed / connection refused这个报错通常出现在本地工具配置了代理但代理进程没起来。检查你的工具设置里有没有HTTP_PROXY或者HTTPS_PROXY环境变量指向了一个不存在的端口。把这两个变量清掉或者确认代理服务在运行。TaoToken 的接口是直连的不需要额外代理层配置里保持 Base URL 为https://taotoken.net/api即可。reading choices of undefined这个报错多见于 OpenAI 兼容格式的客户端去调 Anthropic 格式的接口响应结构对不上。检查你的客户端是不是把响应当成choices[0].message.content来解析。Anthropic 格式的响应是content[0].text。如果你用的工具只支持 OpenAI 格式需要在工具里切换协议或者换用支持 Anthropic 的客户端。OAuth 相关报错Claude Code 首次登录会走 OAuth 流程如果你已经用 API Key 配置了ANTHROPIC_API_KEY就不需要再走 OAuth。如果同时存在 OAuth token 和 API Key可能会冲突。处理方式是删掉~/.claude下的凭据缓存文件重新用 API Key 配置。具体文件名以你本地实际为准一般是credentials.json这类。图表不显示但控制台无报错检查容器 id 是否和echarts.init里的参数一致检查setOption是否在 DOM 加载完成后执行。把 script 标签放在 body 末尾或者用DOMContentLoaded包一层。另外如果 option 里 series 的 data 是空数组图表会显示坐标轴但没有图形这种情况回去检查 Excel 读取环节是否拿到了数据。排错时建议按「先验证 API 连通性 → 再验证单图表渲染 → 最后验证多图表页面」的顺序不要一上来就调整个页面。单图表能跑通多图表基本只是复制粘贴的问题。API 连通性可以用模型对话页面发一条简单消息测试确认返回正常再进入编码环节。6. 把这条链路固定下来从一次性脚本到可复用模板跑通一次之后建议把提示词和 ECharts option 存成模板文件下次换数据只改 Excel 和字段映射表。我的做法是建一个templates目录里面放prompt.md、field-mapping.md和echarts-options.js三个文件。每次新报告复制一份目录改字段映射把 Excel 丢给 Claude让它按模板生成 HTML。这样每次的产出结构一致团队里其他人也能接手。如果你需要长期跑这类任务比如每天生成销售看板可以考虑用 Coding Plan 把提示词和校验逻辑固化成一个可重复执行的流程。Coding Plan 适合这种有固定输入输出、需要反复调用的场景比每次手动开对话省事。接入文档在https://taotoken.net/docAPI Keys 在https://taotoken.net/api-keys模型对话在https://taotoken.net/chat。先把单次链路跑顺再考虑自动化顺序不要反。最后留一个实用技巧ECharts 的dataset配置可以把数据和 option 分离数据用二维数组表示option 里只写encode映射。这样 Claude 生成时只需要输出数据数组和一份固定的 option 模板出错概率更低。你可以让 Claude 按dataset格式重写一次对比一下和直接写series.data的差异选一个你维护起来更顺的方式。