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

不同類型的圖表用于分析和呈現不同類型的數據：

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

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

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

一、效果展示

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

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

原型地址：https://8hzm1c.axshare.com#g=1p=js多圖表切換_中繼器版

二、思路講解

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

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

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

三、圖表代碼分析

1. 柱狀圖

在echarts官網可以找到，柱狀圖的代碼如下所示，紅色框框對應的是x和y的數據。

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

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

2. 條形圖

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

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

3. 餅圖和環形圖

環形圖的代碼如下所示，紅色框框對應的餅圖的數據：

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

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

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

折線圖的代碼如下所示：

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

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

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

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

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

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

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

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