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 效果如下圖所示,行動端查看報表的方式參見 預覽行動端範本。
