公開課視訊回放

本文内容概要

下文主要通過一份表單填報資料介紹宜搭報表頁面的制作，内容根據每項功能的實作進行拆解，讀者可以根據自身的掌握情況選擇性閱讀，主要内容如下：

報表頁面的資料源使用
篩選關聯&資料過濾
公式與聚合計算
超連結
進階功能使用

産品文檔:

https://help.aliyun.com/product/109414.html

一、資料源使用

在宜搭上，報表頁面的資料一般來自于“單據頁面”，應用制作者通過單據頁面收集到使用者資料後，便能用作制作報表頁面的圖表。源表有以下規則：

單據頁面與資料源表一一對應
表名稱預設是單據頁面的名稱

表一般能在圖表元件的“選擇資料源”當中選到：

我們可以看到除了單表作為圖表的資料源，宜搭還提供了“多表關聯”&“資料準備”，多表關聯類似維表與事實表之間的關系場景，使用時，系統會将多表關聯後的結果集作為圖表的資料源。

資料準備是新推出的功能，可以允許使用者對資料源表做更多的加工操作，與多表關聯不同的是：

多表關聯不生成具體的實體表，資料實時更新
資料準備是離線資料，資料更新周期T+1
資料準備會提供更多的加工能力，例如允許使用者進行跨應用資料關聯

資料準備的典型使用方式

1.添加資料源

每個應用都會有一個對應的資料準備“空間”，該空間下會預設添加目前應用的資料作為源，使用者還可以手動添加其他應用的資料作為源，方法如下：

宜搭還可以使用本地資料作為資料源，目前支援Excel&csv格式的檔案：

資料源配置完畢之後，可以使用“資料集”生成最終供報表頁面使用的表：

配置完畢之後，即可在報表設計頁面的資料源選擇當中看到加工後的表

二、篩選關聯&資料過濾

宜搭上提供了3中篩選器元件，篩選器的資料關聯有如下幾個特點：

當圖表的資料與篩選器的資料相同時，預設觸發關聯
當圖表與篩選器的資料綁定不相同時，需要人工綁定“跨cube關聯設定”
篩選器與篩選器之間的資料集相同，預設都不會發生關聯，需要人工配置關聯（暫不支援不同資料集關聯）

公開課03期 |基于宜搭的企業報表頁面搭建公開課視訊回放本文内容概要一、資料源使用二、篩選關聯&資料過濾三、公式與聚合計算四、超連結五、進階功能精彩内容推薦

篩選器與綁定不同資料集的圖表關聯

點開目标篩選器的“跨cube關聯設定”選項，我們可以選擇到對應的異源圖表元件，如果是同源的元件，則不會出現在下拉選項中，配置完畢即可發生關聯。

篩選器與篩選器關聯

宜搭報表頁面的篩選器也可以做出類似級聯的效果，目前僅支援同源篩選器級聯，典型場景例如“省份”與“城市”的選擇，當第一個篩選器選擇了“江蘇”時，城市篩選器僅出現江蘇的下拉選項。

需要提醒的是篩選器之間的關聯都是單向關聯，即如果要設定“選擇了城市之後，省份篩選器的下拉選項中也隻有對應的省份”，必須在兩個篩選器當中都去做對應的設定，才能達成“雙向級聯”

日期的區間設定

宜搭的篩選器在“預設值”當中選擇日期區間：

篩選器的其他配置

1.篩選容器

打開頁面的“大綱樹”，我們可以找到“過濾器容器”，輕按兩下選中，這裡可以對全局篩選器進行一些配置

例如是否顯示“重置”按鈕、人工配置每個元件之間的關聯關系等。

另外過濾器容器本身控制着所有篩選器和圖表之間的關聯關系，我們打開【編輯代碼】，可以看到目前所有關聯的具體情況，這裡可以使用代碼對關聯進行精準控制。在圖表關聯不起作用的時候，這裡也可以作為排查定位問題的一種手段，可以比較快的定位到問題所在并進行修複。

每個圖表元件的唯一辨別，都可以在元件的setter欄【其它】中找到，對比過濾器容器中的代碼即可定位問題

2.篩選器之間的級聯代碼

篩選器與圖表的關聯代碼在【過濾器容器】當中，篩選器之間的關聯代碼在篩選器本身的setter上，我們将右側setter拉到最底端即可看到

3.關閉篩選器對元件的影響

在每個圖表元件的【條件過濾】配置中，會出現一些不能編輯的過濾項，這些是由全局篩選器帶來的，在右側會有一個小鎖，預設打開，我們可以選擇關閉，關閉時，此項篩選條件便不會被“激活”

三、公式與聚合計算

1.公式

每個圖表在使用資料集時，都可以根據表的原始字段再派生出一些自定義字段進行使用。公式能夠實作一些普通的聚合計算無法做到的一些效果，例如下面這個以聚合函數SUM的例子：

2.聚合計算

宜搭中的聚合計算分為兩步，第一步是普通的聚合，我們稱之為一次計算，第二步是基于一次計算之上的計算，主要是計算排名，占比之類的操作，我們稱之為二次計算

這裡主要講二次計算，二次計算可以求排名、占比、同環比等資料，比較難懂的是同環比的配置。同環比是個資料時間偏移後再計算的概念，宜搭上的操作說明如下：

我們将二次計算區域的設定分為【設定1】和【設定2】兩項

設定1是參照某個日期字段的值對目标字段的資料進行偏移，偏移後求到的是偏移時間點的資料的絕對值

設定2也是基于目前字段的計算，與設定1不耦合，可單獨使用，例如求排名。關鍵在于如果設定2當中的配置也和時間有關時，配置1和2的設定會同時作用，例如設定1和2都偏移了1個月，最終結果會偏移2個月。是以我們一般求同環比時，設定1和2不需要同時設定，僅編輯【設定2】即可。

四、超連結

超連結是圖表元件的一項功能，在這裡我做一下詳細的使用介紹。宜搭的報表頁之間可以互相傳遞超連結的參數，用作條件過濾。超連結的配置界面，可以在各種圖表元件的字段配置上找到。

超連結發起元件的配置

發起元件指的是連結行為觸發的源元件，例如一個表格，我們可以在表格的列字段上找到相關配置：

這裡面我們可以看到對應的參數叫：FORM_VFYJKJZUXFK5SSKT3MWA5CZLFQBF3KNQ7JXVJI5%_%textField_d0fu3qc

這個參數以“%_%"為分隔分為兩部分：

目标表辨別：FORM_VFYJKJZUXFK5SSKT3MWA5CZLFQBF3KNQ7JXVJI5

表字段辨別：textField_d0fu3qc

這裡的參數指的跳轉後的目标對象的辨別，也就是說當超連結的接收元件的過濾條件的綁定字段與發起元件一緻時，這裡可以不用做任何修改正常使用。當接收元件與發起元件的綁定資料表不一樣時，這裡需要做相對應的修改。需要找到接收元件綁定的資料表資訊。

接收表的相關資訊可以在元件的表字段的hover内容當中找到：

超連結接收元件的配置

發起元件的配置完畢後，我們隻要在接收元件的【條件過濾】中添加對應的過濾項即可，這個過濾項不用填任何具體的值，這裡的字段資訊即上文需要比對的參數資訊：

五、進階功能

宜搭的報表頁面提供了一些靈活調整的功能，這些算作是制作報表時的一些高階小技巧。

1.元件布局位置的精确調整

報表頁的元件比較多後，用拖拽的方法比較難以控制準确的布局，特别是在tab、分欄等元件使用後，這裡我們推薦通過大綱樹精确控制元件的位置。

2.樣式的批量設定

有時候我們需要精确調整一些元件的樣式，比如【文本】元件，會有下圖的進階樣式配置選項

這裡我們每個元件都一一設定樣式非常麻煩，推薦使用源碼編輯功能，複制目前的樣式代碼，在目标元件當中使用。

3.元件傳回資料的代碼級調整

宜搭還處在高速成長期，在圖表可視化層面的功能還不完善，當我們想實作一項功能，但目前宜搭的圖表設定還不具備此項能力時該怎麼辦呢？我們可以嘗試使用元件提供的傳回資料處理，來做一些JS代碼級别的調整。

我們可以通過浏覽器快速拿到這個content對象的schema結構，做法是在預覽頁面打開開發者模式，拿Chrome來舉例，快速找到”getXXXdata“字樣的傳回資訊，裡面會包含content的結構

我們可以在function中做任意JS代碼處理，也可以使用debugger或者console.log等手段驗證我們的處理是否正确。

公開課03期 |基于宜搭的企業報表頁面搭建公開課視訊回放本文内容概要一、資料源使用二、篩選關聯&amp;資料過濾三、公式與聚合計算四、超連結五、進階功能精彩内容推薦