第一張決策報表

1.1 版本

1.2 預期效果

注：更推薦使用 FVS數據視覺化 ，作為專業的資料視覺化工具，比決策報表製作視覺化看板效率更高、效果更豐富 。快速入門製作可參考 第一張FVS範本 。

本文將簡單介紹如何製作一張決策報表，其預期效果如下圖所示。

• 參數介面：透過下拉框元件選擇地區，查詢出對應地區的資料。

• 報表塊：展示參數查詢的地區下，各銷售員對應的產品類型的銷量。

• 圖表塊：展示所有地區對應的產品類型的總銷量，無關參數查詢。

2.1 建立決策報表

點選菜單欄「檔案>建立其他範本>建立決策報表>建立空白範本」，範本主題保持為預設「經典穩重」，如下圖所示：

2.2 準備資料

建立資料庫查詢 ds1 ，輸入 SQL 查詢語句：SELECT * FROM 銷量 ，取出銷量表中的所有資料，如下圖所示：

2.3 設定組件

1）將參數介面、報表塊、柱形圖依次拖入 body，參數介面只能新增在 body 頂部，與 body 屬於同一層級；報表塊和柱形圖屬於 body 下的層級，如下圖所示：

2）選中 body ，範本預設為「非固定佈局」，此時可以修改組件間隔和內邊距，將其均修改為 20 ，如下圖所示：

2.4 設計參數介面

1）點選菜單欄「範本>範本參數」，新增一個參數，雙擊參數名重新命名為「地區」，預設值輸入「華東」。如下圖所示：

2）選中參數介面，將地區參數新增到參數介面，設地區參數的元件為「下拉框元件」，如下圖所示：

3）選中下拉框元件，在右側屬性面板中設定「資料字典」，綁定當前範本的資料查詢 ds1 中的「地區」欄位。如下圖所示：

4）選中參數介面「para」，可設定參數介面的屬性，「點選查詢前不顯示報表內容」預設勾選，那麼預覽範本時需要點選查詢後才顯示資料。本例將其取消勾選，預覽時則可以直接顯示資料。如下圖所示：

2.5 設計報表塊

選中報表塊，點選右上角的編輯按鈕  進入報表塊編輯介面，設計表格如下圖所示：

具體操作步驟如下：

1）A1~D1 儲存格輸入表頭資訊，將資料集 ds1 中對應的資料欄拖入 A2~D2 儲存格。

2）選中 A1~D1 儲存格，設定「儲存格屬性>樣式」為「跟隨主題>表頭」。如下圖所示：

3）同上，選中 A2~D2 儲存格，設定「儲存格屬性>樣式」為「跟隨主題>正文」。如下圖所示：

4）選中 D2 儲存格，設定「銷量」的資料設定為「匯總>求和」。如下圖所示：

5）雙擊 A2 儲存格，設定過濾條件，使其根據「地區」參數過濾資料進行展示。如下圖所示：

6）完成表格設定後，點選介面下方的「表單」回到決策報表 body 介面。

7）選中報表塊，設定報表塊組件的標題可見，輸入標題「銷量明細」，內容顯示方式設定為「雙向鋪滿報表塊」，這樣在預覽報表時，表格中的內容會根據報表塊組件的大小雙向鋪滿。如下圖所示：

2.6 設計圖表塊

1）選中圖表塊，設定組件標題為「銷量概況」。如下圖所示：

2）點選圖表塊右上角的編輯按鈕  進入編輯狀態，綁定圖表資料如下圖所示：

本例不對圖表樣式多做修改，更多內容請參考文檔：圖表樣式 。

2.7 設定PC端自適應屬性

儲存範本，點選「PC端預覽」，效果如下圖所示：

可以看到表格的字體與整體對比，顯得略微大了一些，這是因為決策報表的 PC端自適應屬性 預設字體是自適，會根據瀏覽器解析度進行縮放。

點選菜單欄「範本>PC端自適應屬性」，選擇「為該範本單獨設定」，將字體設為不自適應即可。如下圖所示：

2.8 效果預覽

1）PC 端

儲存範本，點選「PC端預覽」，效果如下圖所示：

參數查詢時，範本整體重新整理，報表塊根據參數過濾資料，柱形圖的資料不變。如下圖所示：

2）開發者除錯

點選「開發者除錯」預覽，效果如下，其展示的是範本初始狀態下寬高等比例尺效果，所以字體依然呈現為「自適應」狀態。

通常在該預覽模式下自適應效果較好的範本，能較好的適應不同解析度裝置。

3）行動端

App 及 HTML5 效果如下圖所示，行動端查看報表的方式參見 報表行動端預覽 。

點選下載已完成範本：決策報表入門範例.frm