Echarts官網上有豐富的圖表，如何使用Axure引用Echarts的圖表來使我們的原型更加生動？本文就著重介紹Axure上使用JS方法來引用Echats圖表。

一、軟件版本

Axure9及以上

二、操作步驟

1、打開Axure，新建一個項目。

2、在軟件右下方的組件（元件）區，找到矩形，將它拖動到工作區，將矩形進行命名，我們在此命名他為“ceshi”。

3、然后插入一個載入時事件，用來觸發javascript偽協議的執行。選擇“鏈接到URL或文件路徑“，點擊fx，在彈出的窗口中可以輸入javascript偽協議代碼。

4、代碼的基礎框架如下所示，首先引入Echarts庫文件，然后在定時器中執行圖標繪制代碼，先獲取前面插入的矩形框，作為圖表繪制的容器，然后進行初始化。只需要將Echarts官網中的示例代碼的option部門內容拷貝到代碼中的option位置即可。然后將代碼整體復制到上面的Axure中的編輯框中。

javascript:
//引入ECharts庫
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);
    //獲取插入的矩形框對象，test是上面取得名字，如果是其它名字，則進行替換
    //這里用了定時器來延遲圖表載入時間，測試時發現剛引入ECharts庫就執行圖形代碼可能會出錯。
    setTimeout(function(){
    //獲取插入的test矩形框，作為圖表繪制的容器,如果前面矩形框為其它名字，則test改為對應的名字
    var dom =$('[data-label=test]').get(0);
    //初始化
    var myChart = echarts.init(dom);
    
    var option = {
        /*在此處粘貼ECharts官網的示例代碼*/
    };
    //設置數據
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

5、代碼復制到Axure中時需要去掉其中的所有漢字注釋代碼，下面為去掉注釋的版本。

6、點擊fx，將代碼復制進去。

這樣，一份精美的圖表就制作完成了。