這篇文章是筆者整理分享的關(guān)于Axure高保真教程中多圖表動(dòng)態(tài)切換的相關(guān)內(nèi)容，想要了解有關(guān)于這類(lèi)知識(shí)的同學(xué)可以進(jìn)來(lái)看看哦！

不同類(lèi)型的圖表用于分析和呈現(xiàn)不同類(lèi)型的數(shù)據(jù)：

• 柱狀圖用于比較不同類(lèi)別或組之間的數(shù)據(jù)；
• 條形圖用于顯示數(shù)據(jù)的分布情況，特別是連續(xù)數(shù)據(jù)的頻率分布；
• 餅圖和環(huán)形圖用于表示各部分占整體的比例；
• 折線圖、曲線圖和面積圖用于顯示數(shù)據(jù)隨時(shí)間、連續(xù)變量或有序類(lèi)別的變化趨勢(shì)；
• 階梯圖用于顯示數(shù)據(jù)點(diǎn)之間的突然變化或跳躍；
• 雷達(dá)圖用于比較多個(gè)變量在不同類(lèi)別或維度上的相對(duì)大??；

每種圖表類(lèi)型都有其獨(dú)特的優(yōu)勢(shì)和用途，選擇正確的圖表類(lèi)型取決于你希望傳達(dá)的信息和數(shù)據(jù)的性質(zhì)。合適的圖表可以使數(shù)據(jù)更易理解和分析。

對(duì)于同樣一份數(shù)據(jù)，不同人對(duì)數(shù)據(jù)的著重點(diǎn)不一樣，想看的圖表也不一樣，作者之前有教過(guò)大家怎么在Axure中調(diào)用echarts圖表，并且修改成中繼器可增刪改的模式，那今天作者就教大家，如何在Axure中通過(guò)中繼器實(shí)現(xiàn)多圖表動(dòng)態(tài)切換的效果。

一、效果展示

點(diǎn)擊對(duì)應(yīng)圖表的圖標(biāo)，可以切換顯示對(duì)應(yīng)的圖表。

在左側(cè)表格可以進(jìn)行增刪改的操作，修改之后，所有圖表根據(jù)表格的值生成對(duì)應(yīng)的新圖表。

二、思路講解

如果單單調(diào)用echarts圖表并不難，之前在能增刪改數(shù)據(jù)的動(dòng)態(tài)餅圖的文章教程以及能增刪改的echarts圖表的視頻教程里都有詳細(xì)的介紹如何在Axure中吊鐘echarts圖表，并且改成中繼器可增刪改數(shù)據(jù)的模式，如果不記得的同學(xué)，可以看回前面的文章教程或者視頻教程。

難點(diǎn)在于每個(gè)圖表的代碼都是不一樣的，那如果我們用切換動(dòng)態(tài)面板的方式，把每個(gè)圖表放在動(dòng)態(tài)面板不同的state里面，這樣的話，這樣的話就會(huì)出現(xiàn)很多個(gè)中繼器表格，這樣維護(hù)數(shù)據(jù)，更新中繼器表格的操作就會(huì)復(fù)雜起來(lái)，而且太多中繼器的話，也可能導(dǎo)致頁(yè)面卡頓的情況出現(xiàn)。

那既然每個(gè)圖表都是由代碼行程的，我們通過(guò)分析它的代碼，然后在點(diǎn)擊圖表圖標(biāo)的時(shí)候，根據(jù)不同的圖表，設(shè)置不同的代碼，用中繼器里的數(shù)據(jù)替換掉對(duì)應(yīng)的數(shù)據(jù)內(nèi)容，在重新觸發(fā)圖表加載，就可以實(shí)現(xiàn)一個(gè)中繼器表格，控制全部圖表的數(shù)據(jù)了。

三、圖表代碼分析

1. 柱狀圖

在echarts官網(wǎng)可以找到，柱狀圖的代碼如下所示，紅色框框?qū)?yīng)的是x和y的數(shù)據(jù)。

那么我們要將他替換成變量，可以用兩個(gè)文本分別為邏輯文本x和邏輯文本y對(duì)應(yīng)，在中繼器每項(xiàng)加載時(shí)，我們依次記錄中繼器表格里的值，設(shè)置到對(duì)應(yīng)的邏輯文本x和y里。

最后再重新加載圖表就可以了，顯示出柱狀圖了。

2. 條形圖

條形圖的代碼圖下圖所示：

其實(shí)條形圖和柱狀圖的代碼基本一致，只不過(guò)原來(lái)的xAxis變成yAxis，原來(lái)的yAxis變成了xAxis，我們方法和前面一樣，只需要調(diào)換一下順序就可以了。

3. 餅圖和環(huán)形圖

環(huán)形圖的代碼如下所示，紅色框框?qū)?yīng)的餅圖的數(shù)據(jù)：

這里我們?cè)谥欣^器每項(xiàng)加載時(shí)，就要用一個(gè)新的文本作為變量，替換帶data里面的數(shù)據(jù)，我們根據(jù)他的格式寫(xiě)公式替換即可。

餅圖和環(huán)形圖基本是一致的，唯一不同的是radius這個(gè)參數(shù)，數(shù)組的第一項(xiàng)是內(nèi)半徑，第二項(xiàng)是外半徑，我們通過(guò)修改這個(gè)值，就可以從環(huán)形和餅圖之間切換。

4. 折線圖、曲線圖、面積圖和階梯圖

折線圖的代碼如下所示：

其實(shí)條形圖和柱狀圖的代碼基本一致，只不過(guò)是type不一樣，折線圖是line，柱狀圖是bar，所以我們方法和前面一樣，可以直接將變量設(shè)置為前面設(shè)置好的邏輯文本x和y，在觸發(fā)圖表加載就可以了。

然后曲線圖和折線圖的區(qū)別，也是僅僅多了一個(gè)smooth: true。

面積圖和折線圖的區(qū)別是多了一個(gè)areaStyle: {}。

階梯圖和面積圖的區(qū)別是多了一個(gè) step: ‘middle’。

根據(jù)不同的圖，設(shè)置對(duì)應(yīng)的代碼打開(kāi)，就可以看到對(duì)應(yīng)的圖表了。

如果調(diào)用其他echarts的基礎(chǔ)圖表也是一樣，先找到他的代碼，找到數(shù)據(jù)對(duì)應(yīng)的代碼，在中繼器每項(xiàng)加載時(shí)，按照其格式，設(shè)置到一個(gè)變量的文本里，在切換圖表的時(shí)候，用打開(kāi)鏈接的方式，打開(kāi)對(duì)應(yīng)圖表的代碼，并且用變量替換掉對(duì)應(yīng)的數(shù)據(jù)。

這樣我們就制作完成了，下次使用時(shí)，我們只需要修改中繼器表格里數(shù)據(jù)，就可以直接使用了。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。