起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure9.0教程：通過(guò)內(nèi)聯(lián)框架引入echarts圖表、視頻
編輯導(dǎo)讀：在用Axure繪制原型時(shí)，可以通過(guò)內(nèi)聯(lián)框架引入echarts動(dòng)態(tài)圖表、視頻等來(lái)讓原型看起來(lái)更為高大上。具體應(yīng)該如何操作呢？本文作者對(duì)此進(jìn)行了分析，希望對(duì)你有幫助。
Axure繪制原型時(shí)，如何讓原型看起來(lái)更為高大上？我們可以在制作原型時(shí)通過(guò)內(nèi)聯(lián)框架引入echarts動(dòng)態(tài)圖表、視頻等。
效果預(yù)覽：
引入echarts漸變堆疊面積圖-預(yù)覽：
引入視頻-預(yù)覽：
一、Axure引入echarts圖表
1）添加內(nèi)聯(lián)框架
Axure新建頁(yè)面，在基本元件中選擇【內(nèi)聯(lián)框架】，拖拽進(jìn)頁(yè)面，點(diǎn)擊【樣式】，勾選隱藏邊框；
2）選擇echarts圖表
進(jìn)入echarts官網(wǎng)：https://echarts.apache.org/examples/zh/index.html；選擇你需要插入Axure中的圖表；
進(jìn)入所選的圖表中，可以對(duì)其數(shù)據(jù)進(jìn)行修改，修改成自己想要的數(shù)據(jù)；如下圖所示：
點(diǎn)擊【下載示例】，將修改過(guò)后的echarts圖表以html文件格式下載下來(lái)；
3）將下載下來(lái)的圖表引入到內(nèi)聯(lián)框架中
注：【鏈接一個(gè)外部的URL或文件】支持三種引入，相對(duì)路徑、絕對(duì)路徑很根路徑；
以下我是通過(guò)根目錄的方式引入html文件；需要將下載好的圖表html文件放入原型所生成html根目錄文件夾下；
雙擊內(nèi)聯(lián)框架，彈出鏈接屬性，選擇【鏈接一個(gè)外部的URL或文件】，填入echarts圖表全稱。
注意：這時(shí)只有生成HTML才可以看到圖表信息，如果直接點(diǎn)擊預(yù)覽，會(huì)報(bào)錯(cuò)【File Not Found】。
二、Axure引入視頻
1）添加內(nèi)聯(lián)框架
同上。
2）通過(guò)內(nèi)聯(lián)框架引入視頻
通過(guò)內(nèi)聯(lián)框架引入視頻有兩種方式，一種引入本地視頻文件、另外一種引入在線視頻。
引入本地視頻：
將視頻文件放入原型所生成html根目錄文件夾下；
雙擊內(nèi)聯(lián)框架，彈出鏈接屬性，選填入本地視頻全稱。
引入在線視頻：
在這里，我以引入嗶哩嗶哩視頻為例，進(jìn)入嗶哩嗶哩網(wǎng)站，選擇需要引入的視頻，點(diǎn)【轉(zhuǎn)發(fā)】按鈕，復(fù)制【嵌入代碼】；如下圖所示：
將代碼填入【鏈接一個(gè)外部的URL或文件】中，刪除下圖中紅框框起來(lái)的部分，然后前面加入https:? ， 最終如右圖所示。
本文由 @小青 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自?Unsplash，基于 CC0 協(xié)議
寫(xiě)得好清晰，感謝樓主，學(xué)到了
第一個(gè)方法試驗(yàn)后一直在出現(xiàn)錯(cuò)誤啊，嘗試兩種方式，直接預(yù)覽和生成兩個(gè)方法。都沒(méi)實(shí)現(xiàn)
你是將下載下來(lái)的html圖表文件放在根目錄下了嗎？再嘗試一下，如果還有問(wèn)題，可以加我微信交流c_qingsong
我也是同樣 試了不好用 我放棄了0.0
我剛剛重新試了一次，方法是沒(méi)有問(wèn)題的，可能你們將文件放錯(cuò)位置了
是不是路徑上有中文呀
該種方式引入時(shí)，不能通過(guò)預(yù)覽進(jìn)行查看，只能生成html頁(yè)面后才能查看。
是的，只能先生成html文件，再預(yù)覽才可以預(yù)覽查看