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

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

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

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

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

一、效果展示

點擊對應圖表的圖標，可以切換顯示對應的圖表。

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

二、思路講解

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

B端究竟需要什么样的产品经理？

B端产品经理都是以提升供应侧的工作效率为目的，所以B端需求主要是以业务问题为导向。 这个是B端产品比较重要的一点，B端产品是服务于一个主体 ...

查看详情 >

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

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

三、圖表代碼分析

1. 柱狀圖

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

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

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

2. 條形圖

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

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

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

環(huán)形圖的代碼如下所示，紅色框框?qū)娘瀳D的數(shù)據(jù)：

這里我們在中繼器每項加載時，就要用一個新的文本作為變量，替換帶data里面的數(shù)據(jù)，我們根據(jù)他的格式寫公式替換即可。

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

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

折線圖的代碼如下所示：

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

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

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

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

根據(jù)不同的圖，設置對應的代碼打開，就可以看到對應的圖表了。

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

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

那以上就是本期教程的全部內(nèi)容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。