标签：网格线 网格 1fr DataGear 点击 可视化 菜单项 屏幕 页面
DataGear 即支持以编写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网格布局相关概念
效果如下图所示：
至此，看板布局已调整完成。
下面，需要做的是在页面的五个网格中插入图表，依次选中网格，点击【插入】-【内部后置插入】-【图表】，选择并插入图表，如下图所示：
然后，点击【编辑】-【全局样式】菜单项，调整看板全局配色，点击【编辑】-【全局图表主题】菜单项，调整看板全局图表主题，保存并展示，完成看板制作。
最终展示效果如下图所示：
对于任意屏幕尺寸，上述看板都能够自适应，等比例缩放元素、图表尺寸。
官网地址：http://datagear.tech
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
标签：网格线,网格,1fr,DataGear,点击,可视化,菜单项,屏幕,页面 来源： https://www.cnblogs.com/datagear/p/16392421.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。