大數(shù)據(jù)的時代，數(shù)據(jù)可視化顯得愈發(fā)重要，原型中加入圖表效果能更真實地模擬真實環(huán)境以及開發(fā)效果，如Axure原型中設(shè)計引入ECharts、Highcharts圖表。下方以Axure引入ECharts舉例。

image.png

ECharts圖例官網(wǎng)地址：https://echarts.apache.org/examples/zh/index.html

Axure原型引入ECharts方式

1. 截圖引用；
2. Echarts html文件引入（通過內(nèi)聯(lián)框架鏈接）；【生成html才能看到效果，本地?zé)o法預(yù)覽；內(nèi)聯(lián)框架大小需要配比】
3. 代碼方式加載javascript腳本方式（通過javascript偽協(xié)議直接執(zhí)行ECharts代碼，動態(tài)引入圖表）；【強，自由度高】
4. Axhub charts等組件引用；【一般能滿足】

1. 截圖引用

可自由尋找圖片案例，或在線生成ECharts圖例，截圖加載到Axure原型里即可。
優(yōu)勢：簡單
劣勢：后期不好維護

2. 引入Echarts html文件

通過內(nèi)聯(lián)框架方式鏈接ECharts html文件。
劣勢：本地?zé)o法預(yù)覽，需要生成html打包后才能預(yù)覽效果。
使用方式：
（1）需要將ECharts官網(wǎng)生成的實例html文件下載到本地，并放入到Axure原型生成的文件夾內(nèi)。
（2）通過內(nèi)聯(lián)框架元件引入外部文件（由于放入到Axure打包生成的文件夾里，外部文件名稱為下載的html名稱即可）

image.png

備注：相當(dāng)于在內(nèi)聯(lián)框架區(qū)域單獨引入外鏈接，此時該區(qū)域的背景將由引入的頁面決定，同時內(nèi)聯(lián)框架的大小需要和引入頁面匹配，不然會出現(xiàn)擠壓。

3. 加載javascript代碼方式

Axure強大的地方在于支持多種事件。Axure支持通過javascript偽協(xié)議直接執(zhí)行ECharts的js代碼，動態(tài)引入圖表。
優(yōu)勢：靈活度高，后期維護方便，可直接預(yù)覽
操作方式：
（1）插入矩形元件（或其他元件），將矩形元件名為“test”，使用事件交互方式，如loaded事件，用來觸發(fā)javascript執(zhí)行，選擇“鏈接到URL或文件路徑“，點擊fx函數(shù)；

image.png

（2）在fx函數(shù)彈出的窗口中輸入javascript偽協(xié)議代碼
Axure的fx函數(shù)引用代碼如下：

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 = {
        
    };
    
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

代碼解釋如下，加深理解：

javascript:
//引入ECharts庫，js文件引用cdn，所以需聯(lián)網(wǎng)，如果不聯(lián)網(wǎng)，將min.js文件保存到本地文件夾引用
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);
    //使用定時器來延遲圖表載入時間，剛引入ECharts庫就執(zhí)行圖形代碼可能會出錯。
    setTimeout(function(){
    //獲取矩形框?qū)ο?，“test”是剛才矩形框元件的命名，可自由命名，但需要匹配上
    var dom =$('[data-label=test]').get(0);
    //chart圖表初始化
    var myChart = echarts.init(dom);
    
    var option = {
        /*此處粘貼ECharts官網(wǎng)的示例代碼*/
    };
    //設(shè)置數(shù)據(jù)
    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);

（2）前往ECharts在線生成圖表，復(fù)制ECharts代碼，全選復(fù)制

image.png

例如

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

（3）將代碼復(fù)制到剛才test矩形框的fx函數(shù)里，替代原來的option代碼，包括option字母，點擊確認(rèn)即可預(yù)覽。
【我們可以在ECharts修改代碼為自己想要的效果，也可直接在Axure的fx函數(shù)里進行修改】

image.png

4. 利用Axure組件配置

通過現(xiàn)有的ECharts組件，修改data、config配置，類似中繼器使用

image.png

結(jié)語

Axure引入Echarts圖表并不難用，涉及的代碼也比較淺，第三種加載js方式靈活度更高，第四種通過能滿足需求的現(xiàn)有組件方式更快，你學(xué)會了嗎？