Axure中使用JS代碼調用ECharts、AntV圖表

1.背景

筆者是一名從業8年的B端產品經理，先后在政府行業、能源行業、交通行業任職，以上幾個行業在15年以后，受互聯網產品的影響，都逐漸開始流行起設計數據看板、駕駛艙等概念。數據看板在B端產品設計中的意義從一開始的門面擔當，逐漸轉變成為了業務運行狀態的晴雨表，在B端產品設計的地位也越來越重要。筆者在實際工作中，設計數據看板的任務越來越多，要求越來越高，這些設計需求來源于市場、甲方、老板，要求產品人員在短時間內，產出高質量、動態的設計原型。論及這些需求產生的原因，最根本的還是互聯網行業對傳統行業的滲透，普遍提高了用戶的體驗閾值。再加上傳統行業的大部分從業者也逐漸年輕化，很多關鍵決策崗位都是由懂業務、懂產品的年輕人擔任，這樣的現實對我們B端的產品經理提出了新的挑戰。

2.探索

針對上述需求，筆者開始尋找解決方案，從傳統的解決方案來看，要設計數據看板的原型，常見的方法有：截圖法、html文件法、Axhub Charts法、JS調用法。

首先帶大家認識一些常見的圖表類型，設計圖表的目標是幫助用戶做出判斷和決策，所以從圖表的功能上可對圖表進行分類，包含比較類、分布類、流程類、地圖類、占比類、區間類、關聯類、時間類、趨勢類。

螞蟻集團出品的antV對此有詳細的解說，各位看官請移步：antV https://antv-2018.alipay.com/zh-cn/vis/chart/index.html

3.解決方案

3.1 截圖法

截圖法指從一些提供數據圖表生成的網站，將示例圖表調整成自己想要的圖表，截圖在axure中拼接成數據看板。

優點：簡單、易學、快速、便捷

缺點：圖表展示效果不好，無法動態化

以下是筆者收集到的一些常見圖表生成網站：

• Excel（微軟）

顧明思義，通過excel生成圖表，再將Excel貼圖進axure中。

• Echarts（百度）
• antV(阿里)
• 帆軟（自主廠商）
• ChartCube(阿里)
• 圖說（百度）

擴展閱讀

echarts antv 區別比較？

3.2 html文件法

html僅限于圖表網站提供html下載的場景下使用。

主要步驟是：①打開圖表網站->②調整配置參數->③生成html并下載->④上傳至云服務器->⑤在axure中新建框架原件->⑥框架目標填寫html在云服務器上的地址。

優點：簡單、易學、圖表展示效果好(動態效果)

缺點：發布麻煩、更新麻煩、需要云服務器

①打開圖表網站

Echarts:

https://echarts.apache.org/next/examples/zh/editor.html?c=line-simple

antV:

https://g2.antv.vision/zh/examples/gallery

②調整配置參數

Echarts:

antV:

③生成html并下載

Echarts:

antV:

根據提示修改好代碼，保存成html文件。

④上傳至云服務器

此過程根據自己的實際情況操作。

⑤在axure中新建框架原件

⑥文件地址配置

如果無法顯示，可以嘗試將服務器協議修改為https?？蚣苣繕藨撌侵С謍ttp的。

3.4 Axhub Charts法

Axhub Charts法是引用別人做好的組件，通過配置組件提供的修改方式，動態修改圖表內容。詳情請移步至Axhub官網：https://axhub.im/charts/，他提供兩種版本，一種是免費版本，一種是收費版本。免費版本只支持echarts、antV的部分圖表，收費版本幾乎全部支持。

優點：使用簡單、易學、展示效果好（動態圖表）

缺點：如果圖表示例不滿足需求，需要修改，則修改麻煩，需要對照參數一一調整，無法立即看到調整結果，所見不所得。

3.5JS調用法

JS調用法是圖表應用最高階用法，這一切要起源于axure設計的一個最強大的功能：Axure支持javascript原生語法調用，這也是axure與其他原型設計軟件的最大不同之處。那么下面，我將會重點介紹如何利用axure的這個強大功能實現ECharts、AntV的圖表調用。實現隨用隨改、圖表動態展示、快速構建數據看板的目標。

下文我會為大家詳細介紹axure實現JS調用的方法，axure如何實現ECharts的調用，學會基礎方法，可以修改90%的ECharts圖表，學會進階方法，可以修改98%的ECharts圖表（同時支持4.x和5.x）；本文暫不提供axure實現AntV的調用，如有興趣，可購買筆者的產品，Axure圖表元件庫?；蛘咚叫殴P者。學會AntV調用的基礎方法，可以修改95%的AntV圖表，學會進階方法，可以修改100%的antV（支持4.x，之前的版本未驗證，但應該是支持的）圖表。至于echarts的另外2%則需要JavaScript語法，或者找前端的同學配合則可解決。學會調用echasrts的基礎方法只需要您花上3分鐘。

優點：使用簡單、修改簡單（在ECharts、AntV修改好后，復制代碼立馬可用，所見即所得）、展示效果好（動態圖表）

缺點：基礎調用方法學習簡單，進階調用方法學習麻煩。

基礎方法

• 在axure中新建一個矩形，命名為“bar1”，記住這個名稱，后面改代碼會用到它。

• 設置矩形的用例，載入時，選中自己。然后，點擊打開鏈接。

• 按下圖點擊右邊的“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=bar1]’).get(0);

var myChart = echarts.init(dom);

option = {

xAxis: {

type: ‘category’,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

},

yAxis: {

type: ‘value’

},

grid:{

containLabel:true,

top: 15,

left: 15,

bottom: 15,

right: 15

},

series: [{

data: [120, 200, 150, 80, 70, 110, 130],

type: ‘bar’,

showBackground: true,

backgroundStyle: {

color: ‘rgba(180, 180, 180, 0.2)’

}

}]

};

if (option && typeof option === “object”){

myChart.setOption(option, true);

}}, 800);

如果出現下圖就代表你成功了。

現在我把本代碼的注釋版黏貼在下：

javascript:

//引入ECharts庫

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);

//獲取插入的矩形框對象，bar1是上面取得名字，如果是其它名字，則進行替換

//這里用了定時器來延遲圖表載入時間，測試時發現剛引入ECharts庫就執行圖形代碼可能會出錯。

setTimeout(function(){

//獲取插入的bar1矩形框，作為圖表繪制的容器,如果前面矩形框為其它名字，則bar1改為對應的名字

var dom =$(‘[data-label=bar1]’).get(0);

//初始化

var myChart = echarts.init(dom);

var option = {

/*在此處粘貼ECharts官網的示例代碼*/

};

//設置數據

if (option && typeof option === “object”){

myChart.setOption(option, true);

}}, 800);

參考文章：https://www.pmyes.com/thread-35156.htm

下面我帶你修改一個實例：

進入echarts官網，選擇一個你中意的圖表，進入它的代碼編輯頁面，如下圖：

為了避免語法錯誤，直接全選“option ={…};”

然后替換剛剛那段代碼下圖部分：

結果如下：

按照前文所講的，將此段代碼復制進矩形的打開鏈接的“fx”函數中。

在axure中如下圖顯示：

按f5運行出現柱狀圖就說明你成功了。

剛才的方法當然不是萬能的，不行你試試它：

var labelRight = {

position: ‘right’

};

option = {

title: {

text: ‘交錯正負軸標簽’,

subtext: ‘From ExcelHome’,

sublink: ‘http://e.weibo.com/1341556070/AjwF2AgQm’

},

tooltip: {

trigger: ‘axis’,

axisPointer: {??????????? // 坐標軸指示器，坐標軸觸發有效

type: ‘shadow’??????? // 默認為直線，可選為：’line’ | ‘shadow’

}

},

grid: {

top: 80,

bottom: 30

},

xAxis: {

type: ‘value’,

position: ‘top’,

splitLine: {

lineStyle: {

type: ‘dashed’

}

}

},

yAxis: {

type: ‘category’,

axisLine: {show: false},

axisLabel: {show: false},

axisTick: {show: false},

splitLine: {show: false},

data: [‘ten’, ‘nine’, ‘eight’, ‘seven’, ‘six’, ‘five’, ‘four’, ‘three’, ‘two’, ‘one’]

},

series: [

{

name: ‘生活費’,

type: ‘bar’,

stack: ‘總量’,

label: {

show: true,

formatter: ‘’

},

data: [

{value: -0.07, label: labelRight},

{value: -0.09, label: labelRight},

0.2, 0.44,

{value: -0.23, label: labelRight},

0.08,

{value: -0.17, label: labelRight},

0.47,

{value: -0.36, label: labelRight},

0.18

]

}

]

};

這就需要進階方法了，想進一步了解，可購買筆者的產品，Axure圖表元件庫?；蛘咚叫殴P者。

部分效果預覽：

4.數據看板的前景

數據看板的本質是對業務運行情況的圖形化展示，往深一點、大一點的方向來說，也可以算作是大數據分析的一種展現形式，隨著人們對業務的理解深入，數據看板能夠為企業的決策者提供一些決策依據，在企業的信息化中，也逐漸受到了決策者的重視，所以快速制作數據看板原型是一件高頻率、長期性的需求。從互聯網當前的工具來看，在axure中使用JS調用圖表的方法，是最靈活、便捷、展示效果較好的最好選擇。