axure动态引入图表

通过javascript伪协议引入图表

Axure支持通过javascript伪协议执行javascript代码，因此可以引入Echarts的js库，然后直接在Axure中执行图表的绘制代码，具体如下：

1、首先，在Axure中插入一个矩形框，作为Echars图表绘制的容器，并命名为container，名字可以自定义（该名字用于选择器使用）。

2、然后插入一个载入时事件（可以给页面加页面载入事件，也可给该矩形加载入事件；如果要单击时才出现，可以插入单击事件），用来触发javascript伪协议的执行。选择“链接到URL或文件路径“，点击fx，在弹出的窗口中可以输入javascript伪协议代码。


3、代码的基础框架如下所示，首先引入Echarts库文件，然后在定时器中执行图标绘制代码，先获取前面插入的矩形框，作为图表绘制的容器，然后进行初始化。只需要将Echarts官网中的示例代码的option部门内容拷贝到代码中的option位置即可。然后将代码整体复制到上面的Axure中的编辑框中。代码如下
javascript:
var script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src = “https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js”;
document.head.appendChild(script);
setTimeout(function() {
var dom = $(’[data-label=container]’).get(0);
var myChart = echarts.init(dom);
var option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: ‘line’
}]
};
if (option && typeof option === “object”) {
myChart.setOption(option, true);
}
}, 800);

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
脱机使用方法
如果脱机使用的话按一下方法：

把官网下载的js文件放在Axure的安装目录下面，具体为D:\Program Files (x86)\Axure\Axure RP9\DefaultSettings\Prototype_Files\resources目录下，只要在这个目录下就可以正常引用，推荐放在该目录下的scripts文件夹中。

然后在引用代码中改为script.src ="resources/scripts/echarts.min.js"即可。这样在生成html源文件的时候，该js文件会一同被复制到目标目录中，这样我们直接运行html文件也可以正常显示。

echarts地址：https://echarts.apache.org/examples/zh/index.html#chart-type-pie
https://gallery.echartsjs.com/explore.html#sort=rank_{timeframe=month}author=all