简介这是一份面向 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 或文件」支持三种引入路径。很多初学者在这里只填一个文件名结果怎么都加载不出来原因就是没搞明白路径的解析方式。三种路径的解析基准完全不同路径类型写法示例解析基准适用场景相对路径charts/demo.html当前页面所在位置可用 ../ 回溯原型文件与 HTML 文件在同一层级且需要整体移动绝对路径file:///C:/projects/demo.html 或 https://example.com/demo.html文件协议或完整网络地址固定机器上的固定目录或远程服务器上的资源根路径/demo.html生成 HTML 的根目录最推荐生成后文件夹放到任何位置都能稳定引用我一般把根路径作为默认选择。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?aid890123456bvidBV1xxxxxcid1234567page1 scrollingno border0 frameborderno framespacing0 allowfullscreentrue /iframe这段代码不能直接填进 Axure 的内联框架因为内联框架的「链接一个外部的 URL 或文件」要的是资源地址不是 HTML 标签。所以要把 iframe 标签里除了 src 以外的所有部分都删掉只留下 src 的值。这个值是协议相对地址以 // 开头没有写 https 还是 http。Axure 生成的原型在浏览器里可能走 http 也可能走 https如果直接填 //xxx浏览器会按照当前页面的协议解析但如果你用 file:// 直接打开原型// 就被解析成 file://一样打不开。最稳妥的做法是把 // 改成 https:最终链接为https://player.bilibili.com/player.html?aid890123456bvidBV1xxxxxcid1234567page1将这段地址完整填入内联框架即可。注意这里得到的地址并不指向视频文件本身而是指向 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 charsetUTF-8 title销售趋势/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script /head body stylemargin:0 div idchart stylewidth: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 绑定到 divsetOption 传入配置。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 常见坑文件名编码、混合内容、本地视频格式现象原因处理方式图表页 File Not Found直接点了预览而非生成 HTML始终用「发布 → 生成 HTML 文件」验证图表能打开但视频无法播放页面是 HTTPS视频源是 HTTP产生混合内容拦截在线视频地址必须补 https:或使用支持 HTTPS 的源中文文件名导致 404浏览器对中文路径做了编码而静态服务器未正确解码所有外链文件统一用英文小写命名视频没有画面只有声音视频编码为 HEVC/H.265浏览器不支持转码为 H.264 AAC 的 MP4内联框架周围出现边框样式面板未隐藏边框勾选「隐藏边框」这里提示一下如果你需要展示中国地图或某个省份的数据echarts 官网下载的地图示例需要额外引入地图 GeoJSON 文件这个文件同样要放到根目录下并在 HTML 中通过 script 标签加载。涉及地理数据时注意数据口径要使用公开可查的信息。另外echarts 社区里有很多现成的配置搜索某个图表效果时可以直接复制其 option 片段再保存为独立的 HTML 文件使用。本文还有配套的精品资源点击获取
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 或文件」支持三种引入路径。很多初学者在这里只填一个文件名结果怎么都加载不出来原因就是没搞明白路径的解析方式。三种路径的解析基准完全不同路径类型写法示例解析基准适用场景相对路径charts/demo.html当前页面所在位置可用 ../ 回溯原型文件与 HTML 文件在同一层级且需要整体移动绝对路径file:///C:/projects/demo.html 或 https://example.com/demo.html文件协议或完整网络地址固定机器上的固定目录或远程服务器上的资源根路径/demo.html生成 HTML 的根目录最推荐生成后文件夹放到任何位置都能稳定引用我一般把根路径作为默认选择。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?aid890123456bvidBV1xxxxxcid1234567page1 scrollingno border0 frameborderno framespacing0 allowfullscreentrue /iframe这段代码不能直接填进 Axure 的内联框架因为内联框架的「链接一个外部的 URL 或文件」要的是资源地址不是 HTML 标签。所以要把 iframe 标签里除了 src 以外的所有部分都删掉只留下 src 的值。这个值是协议相对地址以 // 开头没有写 https 还是 http。Axure 生成的原型在浏览器里可能走 http 也可能走 https如果直接填 //xxx浏览器会按照当前页面的协议解析但如果你用 file:// 直接打开原型// 就被解析成 file://一样打不开。最稳妥的做法是把 // 改成 https:最终链接为https://player.bilibili.com/player.html?aid890123456bvidBV1xxxxxcid1234567page1将这段地址完整填入内联框架即可。注意这里得到的地址并不指向视频文件本身而是指向 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 charsetUTF-8 title销售趋势/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script /head body stylemargin:0 div idchart stylewidth: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 绑定到 divsetOption 传入配置。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 常见坑文件名编码、混合内容、本地视频格式现象原因处理方式图表页 File Not Found直接点了预览而非生成 HTML始终用「发布 → 生成 HTML 文件」验证图表能打开但视频无法播放页面是 HTTPS视频源是 HTTP产生混合内容拦截在线视频地址必须补 https:或使用支持 HTTPS 的源中文文件名导致 404浏览器对中文路径做了编码而静态服务器未正确解码所有外链文件统一用英文小写命名视频没有画面只有声音视频编码为 HEVC/H.265浏览器不支持转码为 H.264 AAC 的 MP4内联框架周围出现边框样式面板未隐藏边框勾选「隐藏边框」这里提示一下如果你需要展示中国地图或某个省份的数据echarts 官网下载的地图示例需要额外引入地图 GeoJSON 文件这个文件同样要放到根目录下并在 HTML 中通过 script 标签加载。涉及地理数据时注意数据口径要使用公开可查的信息。另外echarts 社区里有很多现成的配置搜索某个图表效果时可以直接复制其 option 片段再保存为独立的 HTML 文件使用。本文还有配套的精品资源点击获取
