关于在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