基本操作

如果想要在Axure原型中执行简单的JavaScript代码，只需要将交互事件设置为打开链接，链接到URL或外部网址，在函数输入框中输入javascript:，后面补充需要执行的js代码即可，例如

javascript:
alert('利用Axure JS的伪协议方式，执行JS代码')

既然Axure支持通过JS为协议执行JS代码，因此也可以直接引入Echarts JS库，直接在Axure中执行图表的渲染和绘制。

具体操作步骤如下：

  1. 创建用于展现图表的矩形，并为其命名（命名在JS中需要引用，可以说是变量名。尽量符合图表含义。）
  2. 设置载入时交互事件，打开链接，链接到URL或外部网址。
  3. 在Option配置项中输入如下代码。p.s. 代码里面不能有任何如“/*”、“*/”、“//”的注释符号，Echarts中直接复制过来的代码一般都存在注释，需要手动删除，否则无法在Axure中显示。
javascript:
$axure.utils.loadJS('https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js');
setTimeout(function(){
    var dom =$('[data-label=echarts]').get(0);
    var Chart = echarts.init(dom);
    
    var option = {
    /*echarts的代码写在这里*/
};
    
    if (option && typeof option === "object"){
       Chart.setOption(option, true);    
    }}, 1000);

需要注意的是，var dom =$(‘[data-label=echarts]’).get(0); ，此行代码中 data-lable=[控件命名] ， 即参数要与控件名保持一致。

想要快速看到效果可直接复制以下代码到Axure的IOption中：

javascript:
$axure.utils.loadJS('https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js');
setTimeout(function(){
    var dom =$('[data-label=echarts]').get(0);
    var Chart = echarts.init(dom);
    
    var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};
    
    if (option && typeof option === "object"){
       Chart.setOption(option, true);    
    }}, 1000);
title: 2022.05.19 更新

Echarts JS的CDN地址已由[原地址](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js) 替换为 [现用地址](https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js) 。原CDN地址已经无法访问，导致引用代码时失败

常见问题补充

离线/本地引用

上述引用Echarts的方式是通过CDN进行的，即需要保持联网环境。离线状态下Axure 原型是无法展示图表的。这种情况下可以尝试将 Echarts文件下载到打包好的html导出文件中，建议存放路径为 /resources/scripts，并修改代码：

$axure.utils.loadJS('https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js');

//更改为Echarts.js的相对路径

$axure.utils.loadJS('../resources/scripts/echarts.min.js');

图表加载速度慢

一般都是网络问题导致Echarts加载慢，导致不能正常渲染。毕竟服务器大概率是在国外（没有研究，但Echarts在2018年初被捐赠给转Apache基金会了），可以把Chart.setOption(option, true);}}, 1000); 中的1000（单位ms），改为更大一些的数值，延迟渲染。

或者考虑采用本地引用的方式，能更好解决这个问题。