Axure10 在线编辑echart

1.拖一个矩形框,设定矩形名称:  chartDemo(必填),如图:

 

 

2.选择新增交互->载入->打开链接->链接到外部URL

 

 

 

 

3.点击fx

 

4.在弹出的编辑框中,输入echarts代码

 

 示例:(全部拷贝进去即可)

javascript:(
        function(){
                var script=document.createElement('script');
                script.src='https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
                script.onload=function(){
                    var dom=document.querySelector('[data-label="chartTest"]'); //这个chartTest必须跟矩形框的名称要保持一致！！！！！
                    if(!dom){
                        alert('找不到元件 chartTest');
                        return;
                    }
                    var myChart=echarts.init(dom);
                    var option={
                            tooltip:{},
                            series:[
                                {type:'pie',
                                data:[
                                {value:100,name:'苹果'},
                                {value:200,name:'香蕉'},
                                {value:300,name:'橙子'}]}
                                ]};
                    myChart.setOption(option);
                };
                document.head.appendChild(script);
})()

 6.保存，预览即可

 

 

7.若需要使用本地的echarts.js文件，因为互联网很慢的情况下...(参考:https://blog.csdn.net/m0_64733847/article/details/149254337)

1.找到本地安装的Axure路径
X:\\xxx\Axure\Axure RP 10\DefaultSettings\Prototype_Files\resources\scripts

2.将echarts.min.js 文件下载到本地，拷贝到上面的路径下。

3.配置echart时，将路径
script.src='https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
改为相对路径
script.src='resources/scripts/echarts.min.js';
即可.