大數據的時代，數據可視化顯得愈發重要，原型中加入圖表效果能更真實地模擬真實環境以及開發效果，如Axure原型中設計引入ECharts、Highcharts圖表。下方以Axure引入ECharts舉例。
ECharts圖例官網地址：https://echarts.apache.org/examples/zh/index.html
Axure原型引入ECharts方式
- 截圖引用；
- Echarts html文件引入（通過內聯框架鏈接）；【生成html才能看到效果，本地無法預覽；內聯框架大小需要配比】
- 代碼方式加載javascript腳本方式（通過javascript偽協議直接執行ECharts代碼，動態引入圖表）；【強，自由度高】
- Axhub charts等組件引用；【一般能滿足】
1. 截圖引用
可自由尋找圖片案例，或在線生成ECharts圖例，截圖加載到Axure原型里即可。
優勢：簡單
劣勢：后期不好維護
2. 引入Echarts html文件
通過內聯框架方式鏈接ECharts html文件。
劣勢：本地無法預覽，需要生成html打包后才能預覽效果。
使用方式：
（1）需要將ECharts官網生成的實例html文件下載到本地，并放入到Axure原型生成的文件夾內。
（2）通過內聯框架元件引入外部文件（由于放入到Axure打包生成的文件夾里，外部文件名稱為下載的html名稱即可）
備注：相當于在內聯框架區域單獨引入外鏈接，此時該區域的背景將由引入的頁面決定，同時內聯框架的大小需要和引入頁面匹配，不然會出現擠壓。
3. 加載javascript代碼方式
Axure強大的地方在于支持多種事件。Axure支持通過javascript偽協議直接執行ECharts的js代碼，動態引入圖表。
優勢：靈活度高，后期維護方便，可直接預覽
操作方式：
（1）插入矩形元件（或其他元件），將矩形元件名為“test”，使用事件交互方式，如loaded事件，用來觸發javascript執行，選擇“鏈接到URL或文件路徑“，點擊fx函數；
（2）在fx函數彈出的窗口中輸入javascript偽協議代碼
Axure的fx函數引用代碼如下：
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，所以需聯網，如果不聯網，將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庫就執行圖形代碼可能會出錯。
setTimeout(function(){
//獲取矩形框對象，“test”是剛才矩形框元件的命名，可自由命名，但需要匹配上
var dom =$('[data-label=test]').get(0);
//chart圖表初始化
var myChart = echarts.init(dom);
var option = {
/*此處粘貼ECharts官網的示例代碼*/
};
//設置數據
if (option && typeof option === "object"){
myChart.setOption(option, true);
}}, 800);
（2）前往ECharts在線生成圖表，復制ECharts代碼，全選復制
例如
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）將代碼復制到剛才test矩形框的fx函數里，替代原來的option代碼，包括option字母，點擊確認即可預覽。
【我們可以在ECharts修改代碼為自己想要的效果，也可直接在Axure的fx函數里進行修改】
4. 利用Axure組件配置
通過現有的ECharts組件，修改data、config配置，類似中繼器使用
結語
Axure引入Echarts圖表并不難用，涉及的代碼也比較淺，第三種加載js方式靈活度更高，第四種通過能滿足需求的現有組件方式更快，你學會了嗎？
