導(dǎo)讀：echarts是一個(gè)基于 JavaScript 的開源可視化圖表庫(kù)，里面包含很多常用且美觀的統(tǒng)計(jì)圖表。作者就通過使用中繼器，結(jié)合echart的圖標(biāo)代碼，做出可視化圖表的原型模板，一起來看一下吧。

echarts是一個(gè)基于 JavaScript 的開源可視化圖表庫(kù)，里面包含很多常用且美觀的統(tǒng)計(jì)圖表。但是由于大部分產(chǎn)品經(jīng)理不太懂代碼，導(dǎo)致他們?cè)诋嬙蛨D的時(shí)候，不能直接使用該工具，就算會(huì)代碼，使用起來也不太方便。所以作者就通過使用中繼器，結(jié)合echart的圖標(biāo)代碼，做出可視化圖表的原型模板，用戶使用該模板時(shí)只需在中繼器表格中填入數(shù)據(jù)，就能夠自動(dòng)生成echart圖表，且實(shí)現(xiàn)高保真的交互效果。下面，我會(huì)通過餅圖的案例作為教程，具體效果如下：

原型地址：https://gb6zh9.axshare.com/#g=1

一、思路講解

制作的原理是通過js調(diào)用echart的圖表，然后在通過中繼器修改替換對(duì)應(yīng)的文字，實(shí)現(xiàn)以后再次使用時(shí)，僅需要在中繼器表格中修改數(shù)據(jù)自動(dòng)生成圖表的效果。

首先我們要觀察一下echart餅圖的代碼

上圖左邊是代碼，右邊是代碼實(shí)現(xiàn)的效果，左邊紅色方框內(nèi)的就是數(shù)據(jù)內(nèi)容，也就是我們需要用中繼器替換的文本。

其他的效果，例如有標(biāo)有沒有tooltrip、legend等可以自己設(shè)置，也可以默認(rèn)不改變

二、所需材料

1、中繼器

中繼器只用于記錄數(shù)據(jù)和邏輯交互，并不用于顯示所以我們可以把中繼器內(nèi)部自帶的矩形刪除，或者隱藏中繼器。

中繼器表格設(shè)置：只需要兩列xAxis（項(xiàng)目）和yAxis（項(xiàng)目對(duì)應(yīng)的具體數(shù)據(jù)），如下圖所示填寫，實(shí)際使用時(shí)根據(jù)實(shí)際數(shù)據(jù)填寫，自由增加或刪除行都可以。

2、矩形

我們?cè)O(shè)置一個(gè)矩形命名為code，后續(xù)會(huì)將代碼導(dǎo)入到矩形內(nèi)，同時(shí)該矩形也是用于顯示圖表，可以調(diào)整該矩形的大小來控制圖表的大小。

3、文本標(biāo)簽

默認(rèn)隱藏，默認(rèn)值為空值，只用于記錄中繼器數(shù)據(jù)

三、交互制作

1、中繼器每項(xiàng)加載時(shí)

因?yàn)橹欣^器的數(shù)據(jù)是一行一行加載的，所以我們要通過設(shè)置文本的交互，將所有數(shù)據(jù)記錄在文本標(biāo)簽里面。我們想觀察代碼中紅框的文本： {value: 1048, name: ‘搜索引擎’}

Item.yAxis：具體的數(shù)據(jù)，我們替換掉1048,

Item.xAxis:項(xiàng)目名稱，我們替換掉搜索引擎

target.text：保留前面的數(shù)據(jù)

這樣我們就把數(shù)據(jù)存入到文本標(biāo)簽里面了。

2、矩形載入時(shí)

這里我們通過js讓矩形變成echart的載體，具體有以下的交互

等待：我們需要等待中繼器每項(xiàng)加載完成之后才能執(zhí)行交互，這里等來0.01秒即可。

打開鏈接：在當(dāng)前窗口鏈接到URL或者文件路徑，在里面輸入一下代碼，總共有3段代碼，第一三端代碼是調(diào)用echart的代碼。

第一段代碼如下圖所示：

script.src這個(gè)是js的地址，這里要展開介紹一下，如果可以連接外網(wǎng)的話，直接在echarts的官網(wǎng)找一下在線的js地址替換掉，這樣就可以直接在預(yù)覽的時(shí)候看到圖表，使用也是非常方便。如果不能連接外網(wǎng)的話，就要在echarts的官網(wǎng)里下載js文本，將文件“echarts.min.js”放在axure的 DefaultSettings\Prototype_Files\resources\scripts 目錄下，這樣生成html的時(shí)候，也可以直接統(tǒng)計(jì)圖表。這里需要注意的是，因?yàn)閍xure在預(yù)覽時(shí)是沒有辦法讀取本地文件，所以js本地化的話是沒有辦法在預(yù)覽中看到，所以如果能鏈接外網(wǎng)的話，還是用外網(wǎng)的js地址比較方便。

第二段代碼如下圖所示：

這里的上面的代碼其實(shí)就是在echart復(fù)制過來的，你們可以看回思路講解里面的圖，里面紅色框的數(shù)據(jù)，我們用變量[[LVAR1]]代替，LVAR1就是通過中繼器保存起來的文本標(biāo)簽的值。所以后續(xù)我們就可以直接修改中繼器表格，實(shí)現(xiàn)自動(dòng)生成圖表。

第三段代碼如下圖所示：

第一段代碼和第三段代碼是保持不變的。我們其實(shí)只需要修改中繼器的代碼就可以了。

柱狀圖、條形圖、環(huán)形圖、玫瑰圖、雷達(dá)圖、k線圖、漏斗圖等echarts基礎(chǔ)圖表都可以用這套代碼，制作思路都是一致的，用中繼器替換第二段代買里面的值。這樣做出來的模板，就算是完全不懂代碼的小白都可以直接使用，而且復(fù)用性很強(qiáng)哦。

那以上就是本期的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見，88~~~

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。