關於在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