第一張決策報表

1.1 版本

1.2 預期效果

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

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

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

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

2.1 建立決策報表

菜單欄點選【檔案】→【建立決策報表】，建立空白範本，範本主題預設為【經典穩重】，這裏不做修改。

建立範本步驟如下圖所示。

2.2 準備資料

建立資料庫查詢 ds1 ，輸入 SQL 查詢語句：【SELECT * FROM 銷量 】，取出【銷量】表中的所有資料。

2.3 組件佈局

2.3.1 拖入組件

將我們需要的參數介面、報表塊、柱形圖依次拖入 body。參數介面只能新增在 body 頂部，與 body 同屬於一個層級；報表塊和柱形圖屬於 body 下的層級。

2.3.2 修改佈局

選中【body】 ，範本預設為【自適應佈局】→【非固定佈局】，此時可以修改組件間隔和內邊距，我們將其均修改為 【20】 。

2.3.3 儲存範本

完成初步的佈局設定後，先儲存一下範本。

2.4 設計組件

2.4.1 參數介面

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

2）選中參數介面，將地區參數新增到參數介面，設地區參數的元件為【下拉框元件】。操作步驟如下圖所示：

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

4）選中參數介面【para】，可設定參數介面的屬性，【點擊查詢前不顯示報表內容】預設勾選，那麼預覽範本時需要點選查詢後才顯示資料。

本例將其取消勾選，預覽時則可以直接顯示資料。如下圖所示：

2.4.2 報表塊

選中報表塊，點選右上角的編輯按鈕  進入報表塊編輯介面，設計表格如下圖所示。具體操作步驟如下。

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

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

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

4）選中 D2 儲存格，設定【銷量】的資料設定為【匯總】→【求和】。如下圖所示。

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

6）完成表格設定後，點選介面下方的【表單】回到決策報表 body 介面.如下圖所示。

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

8）此時預覽範本，效果如下圖所示。

2.4.3 圖表塊

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

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

本例不對圖表的樣式多做修改，更多內容請參考文檔：圖表樣式 。那麼到這裏範本的組件設計就完成了。

2.5 設定PC端自適應屬性

預覽範本，效果如下圖所示。

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

那麼我們點選菜單欄【範本】→【PC端自適應屬性】，選擇【為該範本單獨設定】，將字體設為不自適應即可。如下圖所示。

2.6 效果預覽

2.6.2 PC 端

儲存最終的範本，點選【PC端預覽】，效果如下圖所示。參數查詢時，範本整體重新整理，報表塊根據參數過濾資料，柱形圖的資料不變。

2.6.2 開發者除錯

點選【開發者除錯】預覽，效果如下，其展示的是範本初始狀態下寬高等比例尺效果，所以字體依然呈現為【自適應】狀態。通常在該預覽模式下自適應效果較好的範本，能較好的適應不同解析度裝置。

2.6.3 行動端

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

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