Axure引入echarts示例动态图形

结构化知识课堂 2025-05-11 10:03:57

课时名称	课时知识点
Axure引入echarts示例动态图形	echarts示例的引入、示例代码修改，适用于各类型数据统计分析页面

...全文

浏览回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

本文介绍了如何在Axure原型中引入Echarts示例，以实现统计分析页面的动态效果。关键步骤包括：确保Echarts示例尺寸与Axure内联框架一致、使用绝对位置链接内联框架、正确存储Echarts文件、导入数据并修改代码。具体操作流程为：在Axure中拖入动态面板，嵌入Echarts图形，修改代码后下载示例，通过内联框架链接示例，生成HTML文件，并将Echarts文件复制到HTML文件夹中。最后，通过浏览器打开index.html文件，完成Echarts示例的嵌入显示。

第一步，在Axure创建一个矩形，取名字第二步，对矩形添加交互，选择载入时，选择链接到URL或文件路径第三步，打开Echarts或Highcharts官网 Echarts：在官网中打开示例，选择你想要的图形，点击~ 然后在代码编译器中加入以下代码：其中 var dom =$('[data-label=test]').get(0);中的test 为Axure矩形的名字。 ja...

以下用饼状图进行演示，其他图形做法相同先看下最终效果： Echarts示例网址：其中，“data-label=Demo”中的“Demo”就是矩形的名称步骤五：替换基础代码中“option = {};” 替换后代码：步骤六：将代码在矩形Demo中引用保存后运行即可

通过加载javascript脚本的方式动态引入Echarts图表通过javascript伪协议直接执行ECharts、Highchart的代码，动态引入图表。 Axure支持通过javascript伪协议执行javascript代码，因此可以引入Echarts的js库，然后直接在Axure中执行图表的绘制代码，具体如下：首先，在Axure中插入一个矩形框，作为Echars图表绘制的容器，并命名为test，名字可以自定义。为了和上面对比，下面先画了一个矩形框作为背景。然后插入一个载入时事件（如

前言作为一个产品经理，Axure肯定要熟练运用，但是要做高保真的原型图，在碰到要画各种图表时，脑瓜子嗡嗡响，我是自己画呢，还是截图呢，大部分人肯定选择截图，画？不可能画的，不得把我累死了，画个趋势图都够我打一把王者荣耀了。今天教你用Axure画可交互的EChart图表。原理先讲原理，原理很简单，其实网上很多都是利用Axure的内联框架，但是内联框架嵌入代码，只能生成HTML文件才能查看，且你自己嵌入的html代码在发布到Axure云无法使用，很鸡肋。其实原理就是元件在载入时（如果要单击时才出现，可以

在线课程社区_NO_1

1

社区成员

92

社区内容

发帖

与我相关

我的任务

axure 个人社区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章