中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、思路講解

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

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

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

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

二、所需材料

1、中繼器

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

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

2、矩形

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

3、文本標(biāo)簽

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

三、交互制作

1、中繼器每項加載時

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

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

Item.xAxis:項目名稱，我們替換掉搜索引擎

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

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

2、矩形載入時

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

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

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

第一段代碼如下圖所示：

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

第二段代碼如下圖所示：

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

第三段代碼如下圖所示：

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

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

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

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

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