产品功能：交互式 HTML 报表脚本（ECharts / Mermaid / Leaflet）
助手在对话里写出可预览的 HTML 报表 时，统计图、组织/流程图、地图分别用哪套平台脚本；怎样导入示例技能、怎样判断有没有用对。
来源 help/product-features/html-report-scripts.md
表述：助手在对话里写出可预览的 HTML 报表 时，统计图、组织/流程图、地图分别用哪套平台脚本；怎样导入示例技能、怎样判断有没有用对。
检索要点：ECharts、Mermaid、Leaflet、组织架构图、门店分布图、部门职级统计图、禁止 CDN、平台白名单、HTML 预览。
能做什么
在 消息 里请 工作智能体 生成可预览的 HTML 时，平台已托管三套脚本（不要再挂外网 CDN）：
| 你想交付的结果 | 用哪套 | 典型说法 |
|---|---|---|
| 柱状 / 饼图 / 折线等统计图 | ECharts | 「部门职级统计图」「占比饼图」 |
| 组织架构 / 流程 / 关系示意 | Mermaid | 「组织架构图」「部门层级图」 |
| 门店 / 网点点位地图 | Leaflet | 「门店分布图」「网点地图」 |
- 简单一张 PNG 预览仍可用对话里的 数据图表（chart） 工具；要交互、引线、可缩放地图时，用上面的 HTML + 平台脚本。
- 禁止把整段图库代码塞进文件，也禁止
cdn.jsdelivr.net/unpkg等外链——预览环境会卸掉未登记脚本。
三套脚本各管什么
ECharts（统计图）
- 适合：部门 × 职级对比、占比饼图（可带引线标签）等。
- 交付应为可预览 HTML；源码中应出现平台 ECharts 路径（见技能模板）。
- 不要用 Python 画图再嵌 PNG 来代替「交互报表」（除非你只要静态图）。
Mermaid（结构 / 流程）
- 适合：组织树、汇报关系、简单流程图。
- 要的是树状示意图，不是「组织层级」纯表格。若预览里只有表格、没有树状图，说明没走对技能或没引用 Mermaid——见下文「怎么判断」。
- 对话里可 @组织架构示意图（导入示例技能后），并说明「用 Mermaid 重做」。
Leaflet（地图）
- 适合：门店 / 网点地理分布；标记可点击看名称与地址。
- 库本身不含底图。国内默认用高德风格瓦片（OpenStreetMap 官方瓦片在大陆常超时灰块）；海外网络可在地图右上角切换 OSM。
- 点位坐标按常见 WGS84 填写；叠国内底图时模板会做偏移校正。正式商用请改用已申请密钥的天地图 / 高德等合规服务。
- 不要引入 Google / 百度地图的整套网页 SDK；底图只换瓦片地址即可。
怎么用起来（推荐路径）
- 在
技能中心新建 ▾ → 导入技能包，按需导入示例 zip（仓库examples/html-vendor-skills/dist/）：
- 部门职级统计图 → ECharts - 门店分布地图 → Leaflet - 组织架构示意图 → Mermaid
- 在
消息选中 工作智能体（不要用帮助智能体出业务报表）。 - 输入 @ 点选对应技能，再附上数据或取数条件；比只说「做张图」更稳。
- 打开预览：应能看到图 / 树 / 地图；需要大图时用气泡上的 全屏（页内浮层，返回后对话位置不变）。
示例技能与撰写要点也可对照 怎么写好工作区技能 §8.7。
怎么判断有没有用对
| 正常 | 多半没用对 |
|---|---|
| 消息区提示本轮参考了对应技能（可有「已读」「指定」） | 无技能参考，助手直接自由发挥 |
| 预览源码含平台托管脚本（ECharts / Mermaid / Leaflet） | 源码里是外链 CDN，或根本没有图库脚本 |
| 组织架构是 树状图；地图有底图与钉点 | 组织架构只有表格；地图大片灰块且控制台瓦片超时（可换国内底图模板） |
组织类 HTML 若只有表格、没有 Mermaid，预览顶部可能出现黄条提示：请 @组织架构示意图 并用 Mermaid 重做。
和「技能」的关系
- 这三套脚本是 平台能力，不导入技能也能在 HTML 里引用（助手须按指引写对路径）。
- 导入技能 是为了固定版式、触发说法和步骤，让对话更容易想起、做得一致。
- 若智能体开了「仅限以上资源」，请在 可用数据与技能 里勾选已导入的示例技能。见 技能与智能体。
相关文档
- 怎么写好工作区技能 — §8.7 模板与触发说明示例
- 技能里该有什么（允许清单） — 禁止 CDN、最小合格包
- 技能与智能体 — 导入技能包、对话里 @ 技能
- 消息、会话与附件 — 预览与附件
- 工作区应用 — 技能报表固化为应用