DataGear 在2.12版本新增了看板可視編輯模式，並在2.13版本進行了大幅改進和增強，使系統即支持以編寫HTML、JavaScript、CSS源碼的方式製作看板，同時支持以交互式、直觀可見、友好快捷的方式製作看板。
本文將通過看板可視編輯模式提供的網格佈局和樣式設置功能，介紹如何製作自適應大屏、PC、平板、手機等任意屏幕尺寸的數據可視化看板。
首先，點擊看板管理頁面的【添加】-【添加（新窗口）】按鈕，新建一個空白看板，並切換至【可視模式】，如下圖所示：
在製作看板之前，先要確定整個頁面的基本網格結構，本文以三行三列的網格結構爲例，點擊【插入】-【外部後置插入】-【網格佈局】菜單，插入網格佈局，如下圖所示：
- 在空白頁面插入網格佈局時，會有一個【填滿頁面】設置項，默認開啓，網格佈局將會填滿整個頁面，且自適應任意屏幕尺寸。
- 點擊【更多】-【元素邊線】菜單，可在頁面中顯示所有元素邊線，便於直觀查看和選取。
看板頁面的第一行通常是標題行，並且高度是固定的較小尺寸，所以，這裏我們先調整網格佈局第一行的高度，點擊選中頁面中的任一網格，然後點擊【選擇】-【父元素】菜單項，選中網格容器元素，然後點擊【編輯】-【樣式】菜單項，在彈出面板中找到【尺寸】-【網格容器】，將【行劃分】輸入項由
repeat(3, 1fr)
修改爲
3rem 1fr 1fr
- repeat(3, 1fr)：網格三行平分整個高度，具體參考CSS網格佈局相關概念
- 3rem 1fr 1fr：將第一行高度固定爲三倍基礎字體高度，第二行、第三行平分剩餘的高度，具體參考CSS網格佈局相關概念
效果如下圖所示：
然後，將第一行的三個網格合併爲一個，點擊選中左上角的第一個網格，點擊【編輯】-【樣式】菜單項，在彈出面板中找到【尺寸】-【網格條目】，填寫如下內容：
行跨度起始：1
行跨度結束：2
列跨度起始：1
列跨度結束：4
- 網格從第一條橫向網格線跨至第二條橫向網格線，從第一條豎向網格線跨至第四條豎向網格線，具體參考CSS網格佈局相關概念
點擊選中合併後的第一行網格，點擊【編輯】-【文本內容】菜單項，填寫“示例看板”文本內容，點擊【編輯】-【樣式】菜單項，在彈出面板中找到【字體】，填寫如下內容：
字體尺寸：2rem
字體粗細：bold
對齊方式：center
效果如下圖所示：
下面，我們將看板的中間網格調整爲跨兩行、且寬度較大的區域，兩側的四個網格調整寬度稍小的區域，中間可用於放置一個主要圖表，兩側則用於放置四個次要圖表。
點擊選中頁面中的任一網格，然後點擊【選擇】-【父元素】菜單項，選中網格容器元素，然後點擊【編輯】-【樣式】菜單項，在彈出面板中找到【尺寸】-【網格容器】，將【列劃分】輸入項由
repeat(3, 1fr)
修改爲
1fr 1.5fr 1fr
- 1fr 1.5fr 1fr：第一列、第二列、第三列按照1：1.5：1的比例佔據整個寬度，具體參考CSS網格佈局相關概念
點擊選中頁面中第二行的第二個網格，點擊【編輯】-【樣式】菜單項，在彈出面板中找到【尺寸】-【網格條目】，填寫如下內容：
行跨度起始：2
行跨度結束：4
列跨度起始：2
列跨度結束：3
- 網格從第二條橫向網格線跨至第四條橫向網格線，從第二條豎向網格線跨至第三條豎向網格線，具體參考CSS網格佈局相關概念
效果如下圖所示：
至此，看板佈局已調整完成。
下面，需要做的是在頁面的五個網格中插入圖表，依次選中網格，點擊【插入】-【內部後置插入】-【圖表】，選擇並插入圖表，如下圖所示：
然後，點擊【編輯】-【全局樣式】菜單項，調整看板全局配色，點擊【編輯】-【全局圖表主題】菜單項，調整看板全局圖表主題，保存並展示，完成看板製作。
最終展示效果如下圖所示：
對於任意屏幕尺寸，上述看板都能夠自適應，等比例縮放元素、圖表尺寸。
源碼地址：
Gitee：https://gitee.com/datagear/datagear