Axure實戰16:使用Axure和JavaScript引用Echarts圖表

語言: CN / TW / HK

theme: smartblue

在本章中,你將學會使用Axure和JavaScript引用Echarts圖表。

在常見的管理後臺首頁的設計中,常常可以見過一堆的視覺化圖表,它們可能是業務資料的彙總分析,也可能是資料監控的實時結果。

而這些視覺化圖表在原型設計階段想要繪製並展示是一件耗時耗力的事情。

8.png

在尋找Axure和JavaScript結合的專案過程中,發現了可以使用Axure和JavaScript引用騰訊的Echarts圖表,從而實現在原型中展示視覺化圖表的效果。

這裡我們也學習並分享下過程。

專案搭建

首先,建立一個新專案,命名為Echarts。

1.png

資料準備

示例網址:https://echarts.apache.org

我們訪問echarts的官網,然後點進去一個圖表示例,我們可以看到它的JS程式碼和預覽效果。

我們隨意複製一個圖表的JS程式碼,作為示例資料使用。

option = {   tooltip: {     trigger: 'item'   },   legend: {     top: '5%',     left: 'center'   },   series: [     {       name: 'Access From',       type: 'pie',       radius: ['40%', '70%'],       avoidLabelOverlap: false,       itemStyle: {         borderRadius: 10,         borderColor: '#fff',         borderWidth: 2       },       label: {         show: false,         position: 'center'       },       emphasis: {         label: {           show: true,           fontSize: '40',           fontWeight: 'bold'         }       },       labelLine: {         show: false       },       data: [                 { value: 1048, name: '待付款'},         { value: 735, name: '待發貨' },         { value: 580, name: '待收貨' },         { value: 484, name: '待評價' },         { value: 300, name: '待回覆' }       ]     }   ] };

2.png

頁面樣式

首先,在“樣式”工具欄中設定填充顏色為#F0F2F5。

3.png

拖入一個“矩形1”元件,命名為“背景卡片”

設定位置為(40,40),設定尺寸為400*300,設定線寬為0,設定圓角半徑為0。

4.png

拖入一個“矩形2”元件,命名為chart。

設定位置為(50,50),設定尺寸為380*280。chart矩形作為圖表展示區域,為了美觀,因此位於背景卡片居中的位置。

5.png

我們將示例的資料程式碼複製到chart矩形中。

這裡為了約束元件大小,可以設定文字顏色為透明色,也可以縮小字型,這裡為了演示方便,將文字字號改為4。

6.png

至此,我們就完成了頁面的準備。

互動動作

下一步,我們來實現功能部分。

我們可以使用Axure的API直接呼叫javascript程式碼,javascript程式碼如下:

``` javascript: $.getScript('https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js',function(){           var dom =$('[data-label=[[This]]]').get(0);           var chart = echarts.init(dom);           var option =Charts_init();           if (option && typeof option === "object"){              chart.setOption(option, true);               }; } );

function Charts_init() {

/ 這裡放Echarts的JS程式碼 /

return option } ```

我們選中chart矩形,在“互動”工具欄中新建互動。

選擇“載入時”,選擇“開啟連結”,選擇“連結到URL或檔案路徑”,點選fx。

在編輯值彈窗中,將JS程式碼複製到編輯區內。我們點選“新增區域性變數”,新增一個獲取chart矩形文字的區域性變數,並在“這裡放Echarts的JS程式碼”下引用。

7.png

效果預覽

儲存後,我們在瀏覽器中預覽下效果。

8.png

哈哈哈,效果不錯!

為了讓這個樣式能夠公開訪問,我們可以生成html檔案,然後釋出到gitHub或者gitee中,這樣就可以將網站分享給朋友們了。

網站地址

Echarts圖表:http://ricardowesley.gitee.io/echarts

快來動手試試吧!

如果本專欄對你有幫助,不妨點贊、評論、關注~