Axure内联框架嵌入echarts动态图表与视频，打造高保真原型

简介：这是一份面向 Axure 原型设计初学者的实战教程，围绕 9.0 版本的内联框架功能，系统讲解如何将 ECharts 动态图表与视频嵌入原型页面，让原型从静态展示升级为高交互、可视化效果更强的演示方案。教程以图文步骤展开，适用于需要制作高保真原型的产品经理、交互设计师及前端开发人员。资源包为单个 docx 文档，体积 24.2MB，包含完整操作说明与关键界面截图。正文从 ECharts 官网挑选图表、修改数据、下载示例 HTML 说起，再到通过根目录方式引入内联框架，并特别提示了预览时报 “File Not Found” 的注意点，避免读者踩坑。视频部分则分别介绍了本地视频文件和 B 站在线视频的嵌入方法，包括嵌入链接的清洗与补全技巧。目前已有 1058 人学习该教程，适合希望提升原型表现力、快速掌握内联框架扩展用法的读者对照练习，可直接迁移到实际项目中使用。

1. 原型评审阶段，最尴尬的事是数据看板用的是截图、宣传视频放的是占位图。用户看一眼就认定这是死的页面。Axure 9.0 的内联框架（Inline Frame）其实可以直接把 echarts 动态图表和 B 站视频嵌进原型里，生成的 HTML 在浏览器中打开，图表会动、视频能播，观感和最终产品几乎一致。这篇内容会完整拆解这个做法：从内联框架的路径机制，到 echarts 官网取图表改数据，再到本地视频和在线视频的引入，最后是生成 HTML 时的常见坑。适合产品经理、交互设计师，也适合需要用高保真原型去跟研发对齐前端渲染效果的人。

2. Axure 内联框架路径机制与 echarts 图表引入

2.1 先把内联框架拖进页面：元件与样式设置

在 Axure 9.0 中新建页面后，从左侧「基本元件」库中找到「内联框架」，直接拖拽到画布上。注意，这个元件是专门用来承载外部页面或文件的容器，不是普通矩形。选中它，右侧「样式」面板里默认有 1px 黑色边框，这是原型辅助线，生成 HTML 后仍会显示，所以记得勾选「隐藏边框」。如果内联框架里放的是 echarts 图表，不建议勾选「随内容调整大小」，手动把宽高设成固定值，比如 600×400，这样图表容器不会因为数据高度不一致而在原型里跳动。

此外，Axure 9 的内联框架在「基本元件」库右下角，如果找不到，可以在搜索框输入“内联框架”。拖入后建议在「属性」面板把它重命名为 chart-frame 或 video-frame，因为后面设置交互「设置内联框架」时，下拉菜单会按名称区分多个框架，默认名字容易混淆。

2.2 内联框架支持三种路径：相对、绝对、根路径

双击内联框架，会弹出「链接属性」对话框，其中「链接一个外部的 URL 或文件」支持三种引入路径。很多初学者在这里只填一个文件名，结果怎么都加载不出来，原因就是没搞明白路径的解析方式。三种路径的解析基准完全不同：

我一般把根路径作为默认选择。Axure 生成 HTML 后，index.html 所在目录就是根目录，根路径以正斜杠开头，表示从根目录找起。例如把下载好的 sales-chart.html 放进生成目录，链接框里填 /sales-chart.html 即可。相对路径则是从当前页面（比如 pages/index.html）出发，如果资源在上一级的根目录，就得写 ../sales-chart.html，多一层目录就多一层麻烦；绝对路径的 file:// 写法换台电脑就失效，远程地址又受网络限制。所以，凡是需要跟随原型一起交付的文件，用根路径是最稳的。

这里要特别说明：Axure 的“根路径”并不是指 Axure 工程文件所在的文件夹，而是指你执行「生成 HTML 文件」时输出的那个文件夹。如果你把文件放到了另一个目录，即使工程文件在同一路径下，生成的 HTML 里也找不到它。这个认知是后面一切排错的基础。

2.3 从 echarts 官网改造图表并下载 HTML

进入 echarts 官网示例库，左边是图表分类，右侧是配置区和渲染结果。选择你需要的图表，例如「渐变堆叠面积图」。页面右上角可以直接编辑 option 数据，下方实时预览。改数据不需要懂整个 echarts API，只需要定位到 xAxis.data 和 series[].data，替换成自己的业务数据。下面是一个简化后的 option 示例，语法就是 JavaScript 对象字面量，符合 ECMAScript 规范：

option = { color: ['#5470c6', '#91cc75'], tooltip: { trigger: 'axis' }, legend: { data: ['新用户', '老用户'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['05-01', '05-02', '05-03', '05-04', '05-05'] }, yAxis: { type: 'value' }, series: [ { name: '新用户', type: 'line', stack: '总量', areaStyle: {}, data: [320, 402, 301, 434, 390] }, { name: '老用户', type: 'line', stack: '总量', areaStyle: {}, data: [220, 232, 201, 254, 290] } ] };

参数说明：stack 相同的系列会纵向堆叠，areaStyle 控制面积填充，不要面积时直接删除该字段。tooltip.trigger 设为 axis 表示鼠标悬停时按坐标轴维度展示提示框，是数据看板常用的交互。改完后点击页面上的「下载示例」，浏览器会下载一个完整的 HTML 文件。这个文件自带 echarts 的 CDN 引用和渲染脚本，你的数据就包在里面，不需要单独搭建前端工程。

如果你想要的图表类型在官网没有完全一致的，可以去 echarts 社区搜索，很多开发者把自己调好的 option 贴了出来。复制后粘贴到空白 HTML 里，同样可以通过「下载示例」保存。

2.4 链接外部 HTML 文件与 File Not Found 的真正原因

拿到下载的 HTML 后，把它复制到 Axure 生成 HTML 的根目录下。回到 Axure，双击内联框架，选择「链接一个外部的 URL 或文件」，输入 /sales-chart.html，确定。到这里，图表的引入配置就完成了。

但这里有个几乎所有初学者都会撞上的坑：直接点击 Axure 工具栏的「预览」按钮，内联框架区域会显示 File Not Found。原因是 Axure 的预览模式会启动一个临时本地服务，把原型渲染到系统临时目录里，而你填的根路径 /sales-chart.html 指向的是最终生成目录，临时服务里并没有那个文件。所以正确的验证方式是：点击顶部菜单「发布 → 生成 HTML 文件」，选择一个输出目录，生成后打开 index.html。所有依赖外部文件的引入，包括 echarts、视频、音频，都必须走生成 HTML 这条线。很多人在群里问“为什么预览打不开”，九成都是因为这个。

顺便说一下，如果你在生成 HTML 之后，把整个文件夹拷贝到内网服务器或直接用微信发给同事，双击 index.html 依然能正常显示，这就是根路径带来的迁移便利。相对路径在本地文件协议下也通常能用，但一旦原型里有 iframe 嵌套其他页面，相对路径的基准会变成浏览器地址栏里的路径，容易搞混。因此，只要不是刻意用远程 URL，根路径就是最佳实践。

3. 视频引入：本地文件与在线嵌入

3.1 本地视频：放进生成目录，按文件名引用

视频引入的原理和 echarts 一样，都是让内联框架加载一个 URL。区别只在于视频文件体积大、格式敏感，处理起来多一些约束。先把视频文件复制到生成 HTML 的根目录下，我习惯建一个 video 子目录，把 demo.mp4 放进去。然后双击内联框架，链接属性里填 /video/demo.mp4。

这里有三点要注意。第一，文件名不要包含中文、空格和特殊字符，否则浏览器会对路径做 URL 编码，编码结果和实际文件名不一致时就会 404。第二，编码格式强烈建议使用 H.264 + AAC 的 MP4，这是浏览器覆盖最广的组合。MOV、WMV、AVI 在 Windows 的 Chrome 上可能能放，但换成 macOS 的 Safari 就不行了。如果你手里的视频是其他格式，用 FFmpeg 可以快速转码：

ffmpeg -i input.mov -vcodec h264 -acodec aac output.mp4

参数说明：-vcodec h264 和 -acodec aac 强制视频和音频编码，output.mp4 会自动使用 MP4 容器。如果你只需要截取一段，可以加 -ss 00:00:10 -t 30 表示从第 10 秒开始截 30 秒。FFmpeg 不是 Axure 的一部分，但它是处理视频入门的常备工具，命令行一次就够。

第三，视频尺寸要和内联框架匹配，否则播放器会自适应到容器大小，但画面会被裁剪或出现黑边。Axure 的内联框架没有“适应内容”选项，需要你手动在样式面板设定宽高。本地视频通常也是 16:9，直接填 640×360 即可。如果你要严格按视频实际比例来，那就先看视频分辨率，再按比例设置内联框架。

3.2 在线视频：以 B 站为例清洗嵌入代码

在线视频的好处是不用管理本地文件、不占原型体积，适合演示一些公开的产品宣传片。以 B 站为例，打开目标视频页面，点击视频下方的「转发」按钮，选择「嵌入代码」，会得到类似下面这段 iframe 代码：

<iframe src="//player.bilibili.com/player.html?aid=890123456&bvid=BV1xxxxx&cid=1234567&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

这段代码不能直接填进 Axure 的内联框架，因为内联框架的「链接一个外部的 URL 或文件」要的是资源地址，不是 HTML 标签。所以要把 iframe 标签里除了 src 以外的所有部分都删掉，只留下 src 的值。这个值是协议相对地址，以 // 开头，没有写 https 还是 http。Axure 生成的原型在浏览器里可能走 http 也可能走 https，如果直接填 //xxx，浏览器会按照当前页面的协议解析；但如果你用 file:// 直接打开原型，// 就被解析成 file://，一样打不开。最稳妥的做法是把 // 改成 https:，最终链接为：

https://player.bilibili.com/player.html?aid=890123456&bvid=BV1xxxxx&cid=1234567&page=1

将这段地址完整填入内联框架即可。注意，这里得到的地址并不指向视频文件本身，而是指向 B 站的一个播放器页面。内联框架加载该页面后，B 站的播放器会自己发起视频流请求，所以原型体积不会增加，但前提是演示时能正常访问 B 站。如果客户现场没有外网，这种方案就会黑屏，本地视频文件反而是更保底的选择。

3.3 内联框架大小与视频比例控制

视频播放是否美观，取决于内联框架的宽高比是否和视频源一致。B 站播放器默认 16:9，因此内联框架的宽高比也应该是 16:9。Axure 9 中可以直接在样式面板填写精确数值，例如宽度 640、高度 360。如果你用的是响应式布局，可以选择「宽度百分比」并让高度保持固定，但 Axure 原生不支持等比联动，所以最稳妥的做法仍是固定像素。

样式面板里还有「隐藏边框」「隐藏滚动条」两个选项，引入视频时建议都勾上，这样原型上看到的就只剩下干净的播放画面。另外，内联框架的「滚动条」默认是自动，视频页面一般不需要滚动，隐藏后可以避免鼠标滚轮在框架内触发额外滚动行为。

4. 实战：一个带 echarts 图表和视频的演示原型完整流程

4.1 页面布局：左右分栏，左侧图表右侧视频

我们把前面所有知识点合并到一个完整页面里，做一个典型的数据看板原型。在 Axure 空白页面中，拖入两个内联框架，左侧命名为 left-chart，右侧命名为 right-video。选中两个元件，使用顶部工具栏的「水平分布」和「顶部对齐」进行排列，再把左侧宽高设为 60% 宽度、400 高度，右侧设为 40% 宽度、400 高度。为了方便演示，页面背景可以用浅灰色，echarts 图表背景设置成透明，这样视觉上图表像直接画在页面上，而不是一个黑框里的页面。

这里有个实战经验：内联框架加载的 echarts HTML 页面，最好自己带一个透明的背景，并且在 body 上设置 margin:0。如果不设置，浏览器默认会保留 8px 的 margin，导致图表四周出现白边，和 Axure 页面背景不融合。后面给的示例代码已经处理了这个问题。

4.2 替换 echarts 示例数据成自己的业务数据

打开从官网下载的 HTML，替换 option 中的 xAxis.data 和 series.data。如果你想要更干净的页面，可以直接用下面这个完整示例保存为 sales-trend.html：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>销售趋势</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> </head> <body style="margin:0"> <div id="chart" style="width:100%;height:100vh"></div> <script> var chart = echarts.init(document.getElementById('chart')); chart.setOption({ backgroundColor: 'transparent', tooltip: { trigger: 'axis' }, legend: { data: ['销售额', '订单量'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] }, yAxis: [ { type: 'value', name: '销售额' }, { type: 'value', name: '订单量' } ], series: [ { name: '销售额', type: 'line', stack: '总量', areaStyle: { color: 'rgba(84,112,198,0.3)' }, data: [1280, 1420, 1350, 1680, 1900, 2110] }, { name: '订单量', type: 'line', stack: '总量', areaStyle: { color: 'rgba(145,204,117,0.3)' }, data: [320, 452, 391, 534, 690, 780] } ] }); window.addEventListener('resize', function() { chart.resize(); }); </script> </body> </html>

代码说明：echarts.init 绑定到 div，setOption 传入配置。backgroundColor 设为 transparent，继承 Axure 页面背景。双 y 轴场景下，左侧显示“销售额”名称，右侧通过空数组保留刻度但不显示名称，避免文字重叠。resize 监听保证内联框架被父页面拉伸时图表自适应。

把这段 HTML 下载保存后，放到生成 HTML 的根目录。每次你更新数据，只需要重新保存这个 HTML 文件，Axure 工程里不用做任何修改，重新生成 HTML 时文件的引用关系是自动的。

4.3 生成 HTML 并验证引入是否成功

在 Axure 中点击「发布 → 生成 HTML 文件」，选择输出目录，生成后打开 index.html。验证时重点看三个点：第一，左侧图表是否渲染出渐变面积图，鼠标悬停能否出现 tooltip；第二，右侧视频是否显示播放器首帧，点击播放后声音画面是否正常；第三，打开浏览器开发者工具（F12）的 Network 面板，刷新页面，检查 sales-trend.html 和视频文件的请求状态码，200 表示正常，404 说明路径或文件名有问题。

如果图表区域是空白，但 Network 中请求成功，大概率是 echarts CDN 没有被加载。检查一下 HTML 里 script 的 src 是否可访问，如果公司内网限制了外部 CDN，就下载 echarts.min.js 到本地，用相对路径或根路径引入。这一步在给客户做内网演示时非常常见，建议提前把 echarts 文件也放到生成根目录的 lib 子目录里。

这里再提醒一次：直接点 Axure 预览一定报 File Not Found，这是预期行为。只有生成 HTML 后，根路径下的外部文件才存在。所以你在验证任何内联框架内容时，都要习惯走生成 HTML 的流程。

5. 进阶：动态切换图表、iframe 通信与避坑清单

5.1 用交互事件切换内联框架的链接，实现图表切换

静态引入只是基础。产品经理向研发提需求时，经常要演示“不同时间段的数据”。你可以在 Axure 中预先准备多个 echarts HTML 文件，比如 day.html、week.html、month.html，然后通过按钮的「单击时」交互设置内联框架的链接。具体操作：选中页面上的「日」按钮，在右侧交互面板新建用例，选择「设置内联框架」，目标选择 left-chart，值选择「链接一个外部的 URL 或文件」，填写 /day.html。同理，另外两个按钮分别设置 /week.html、/month.html。这样在原型演示时，点击不同按钮就能无刷新切换图表，体验接近真实系统。

5.2 iframe 通信：Axure 页面给 echarts 传参数的思路

内联框架本质是 iframe，但 Axure 生成的 HTML 中，内联框架并不直接暴露 contentWindow 给 Axure 的交互编辑器。换句话说，你没有办法在 Axure 的事件里写一行 JavaScript 去调用 iframe 内部的 echarts 实例。常见做法有两种：一是上述的多 HTML 切换方案，把“参数”预先编码到不同 HTML 文件里，简单可靠；二是修改生成后的 HTML，在外部页面的脚本里手动操作 iframe DOM，获取 contentWindow 后调用 postMessage 向图表页面发送数据。图表页面监听 message 事件，再调用 echarts 的 setOption 更新数据。这种方式需要你具备前端 JavaScript 基础，适合原型交付后由研发继续落地为真实页面，Axure 阶段不建议过度投入。

5.3 常见坑：文件名编码、混合内容、本地视频格式

这里提示一下：如果你需要展示中国地图或某个省份的数据，echarts 官网下载的地图示例需要额外引入地图 GeoJSON 文件，这个文件同样要放到根目录下，并在 HTML 中通过 script 标签加载。涉及地理数据时，注意数据口径要使用公开可查的信息。另外，echarts 社区里有很多现成的配置，搜索某个图表效果时可以直接复制其 option 片段，再保存为独立的 HTML 文件使用。

本文还有配套的精品资源，点击获取