关于在axure中插入echart图表显示

最近在学习axure的使用的时候，基本的问题都可以解了，但是在插入echart图表的时候遇到了一些困难，因为要是直接插入图片的话不生动，插入echart地址，要不然需要放到服务器上做一个http的地址，要不然需要转成html，但是这样页面会散乱，最后上网查了许久，终于找到一个可以实现的方法，写个博客记录一下，大家互相学习一下：

1、在Axure需要插入图表的页面中插入一个矩形框，作为Echars图表绘制的容器，并命名为test，名字可以自定义。

 

 

 2、在载入的时候添加一个事件，用来触发javascript伪协议的执行。选择“链接到URL或文件路径“，点击fx，在弹出的窗口中可以输入javascript伪协议代码。

如下：

 

3、弹出框，然后在区域内输入一下代码：

 

代码：

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=test]\').get(0);
    var myChart = echarts.init(dom);
    
    var option = {
        legend: {
                    orient: \'vertical\',
                    left: \'left\',
                    itemWidth:20,
                    itemHeight:10
                },
                tooltip: {
                    trigger: \'item\'
                },
                series: [
                    {
                        name: \'房屋管理\',
                        type: \'pie\',
                        radius: [30, 100],
                        center: [\'55%\', \'50%\'],
                        roseType: \'area\',
                        itemStyle: {
                            borderRadius: 8
                        },
                        labelLine:{  
                            normal:{  
                                length:4  
                            }  
                        }, 
                        data: [
                            {value: 40, name: \'自住\'},
                            {value: 38, name: \'出租\'},
                            {value: 35, name: \'空置\'},
                            {value: 30, name: \'商用\'},
                            {value: 28, name: \'其他\'},
                        ]
                    }
                ]
    };
    
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

 

 

 然后预览就OK啦，

如下图：

 

 

 

完成，参考博客：

https://blog.csdn.net/love_forver/article/details/111421668?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242