Axure RP9实现加载EchartsJS方法

注意：该方法好像在火狐浏览器上无法实现

首先在页面上添加一个矩阵、设置名为testBar(这个后面要使用到)

然后选择交互->新建交互->载入时->打开连接->链接到URL或者文件路径->fx

具体流程图片如下：

第一步：

第二步：

 第三步：

 第四步：

第五步：

 第六步：

然后在插入变量和函数中添加已下代码(注意：代码中别有注释代码，不然不能运行)

javascript:
$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){
    var dom =$('[data-label=testBar]').get(0);/*这里的testChart就是你矩形的名字*/
    var Chart = echarts.init(dom);
    var option = {
   // 这里是具体charts的代码
    };
    if (option && typeof option === "object"){
       Chart.setOption(option, true);    
}}, 1000);

 另一段代码

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=testBar]').get(0);/*这里的testChart就是你矩形的名字*/
    var myChart = echarts.init(dom);
    var option = {
   // 这里是具体charts的代码
    };
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
}}, 1000);

最后效果图：

 

注意：代码中别有注释代码

注意：代码中别有注释代码

注意：代码中别有注释代码

重要的事情说三遍

echarts地址：https://echarts.apache.org/examples/zh/index.html

好看的echarts地址：https://www.makeapie.com/explore.html