天天看點

Axure怎麼利用Echarts做出動态可視化

Axure怎麼利用Echarts做出動态可視化

衆所周知,axure作為專業的原型設計工具,它能快速、高效的建立原型,同時支援多人協作設計和版本控制管理,今天簡單說一下怎麼利用axure嵌入Echarts做出動态可視化效果。

方式有幾種,今天說一種我感覺比較簡單的。

1、首先需要去Apache Echarts下載下傳js插件,Apache Echarts官網

Axure怎麼利用Echarts做出動态可視化
Axure怎麼利用Echarts做出動态可視化

根據需求選擇需要選擇的内容,在下方點選下載下傳。

Axure怎麼利用Echarts做出動态可視化

2、在axure中建立一個檔案,選擇一個矩形,生成html檔案。

3、找到下載下傳的js插件,複制到生成的html檔案,放到echarts\resources\scripts路徑下。

Axure怎麼利用Echarts做出動态可視化

4、用編輯器(也可以用記事本)打開生成的html檔案中的index頁面将

放到/body标簽下

Axure怎麼利用Echarts做出動态可視化

5、在Echarts中找到想用的圖,在左側進行調整,點選下載下傳示例,完成下載下傳

Axure怎麼利用Echarts做出動态可視化

6、打開下載下傳的html頁面,用編輯器打開,複制script标簽下的代碼到index頁面的/body标簽下。

Axure怎麼利用Echarts做出動态可視化

7、将複制的script标簽下的代碼中id值container替換為原型檔案中的矩形id。

Axure怎麼利用Echarts做出動态可視化

8、預覽生成的原型檔案就行了。

繼續閱讀